/* Geist and Geist Mono by Vercel (SIL Open Font License, see fonts/OFL.txt), served with the app. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bg: #0c1220; /* navy, echoing the logo's blues */
  --bg-elev: #172036;
  --border: rgba(160, 190, 255, 0.12);
  --text: #f2f4f8;
  --text-dim: #98a2b8;
  --text-faint: #66708a;
  --selected: rgba(160, 190, 255, 0.13);
  --hover: rgba(160, 190, 255, 0.06);
  --accent: #3b93ff; /* the logo's blue */
  --optional-cobalt: #6B80FF; /* the dot in the Optional mark (dark grounds) */
  --kbd-bg: rgba(160, 190, 255, 0.12);
  /* The glow at the top of the app: cyan, blue and violet, blended (a "mesh"). */
  --glow-a: color-mix(in srgb, #5ce1e6 32%, transparent);
  --glow-b: color-mix(in srgb, #2a8cff 36%, transparent);
  --glow-c: color-mix(in srgb, #a37cff 34%, transparent);
  --danger: #ff6b6b;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Theme: dark by default; light when chosen, or when "System" and the OS is light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="black"]) {
    --optional-cobalt: #2F4BFF;
    --bg: #f7f7f8;
    --bg-elev: #ffffff;
    --border: rgba(0, 0, 0, 0.08);
    --text: #1d1d1f;
    --text-dim: #6e6e73;
    --text-faint: #a1a1a6;
    --selected: rgba(0, 0, 0, 0.07);
    --hover: rgba(0, 0, 0, 0.035);
    --kbd-bg: rgba(0, 0, 0, 0.07);
    --danger: #d93636;
    --accent: #1a73e8;
    --shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
    --glow-a: color-mix(in srgb, #5ce1e6 30%, transparent);
    --glow-b: color-mix(in srgb, #2a8cff 24%, transparent);
    --glow-c: color-mix(in srgb, #a37cff 24%, transparent);
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --optional-cobalt: #2F4BFF;
  --bg: #f7f7f8;
  --bg-elev: #ffffff;
  --border: rgba(0, 0, 0, 0.08);
  --text: #1d1d1f;
  --text-dim: #6e6e73;
  --text-faint: #a1a1a6;
  --selected: rgba(0, 0, 0, 0.07);
  --hover: rgba(0, 0, 0, 0.035);
  --kbd-bg: rgba(0, 0, 0, 0.07);
  --danger: #d93636;
  --accent: #1a73e8;
  --shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
  --glow-a: color-mix(in srgb, #5ce1e6 30%, transparent);
  --glow-b: color-mix(in srgb, #2a8cff 24%, transparent);
  --glow-c: color-mix(in srgb, #a37cff 24%, transparent);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button { font: inherit; color: inherit; }

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--kbd-bg);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  position: relative;
}

#app[hidden] { display: none; }

/* Sign-in screen ------------------------------------------------------------ */

.gate {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px max(24px, env(safe-area-inset-right)) 72px max(24px, env(safe-area-inset-left)); /* room for the credit */
  background: var(--bg);
  overflow: auto;
}
.gate[hidden] { display: none; }
.gate-card {
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  text-align: center;
}
.gate-logo { width: 56px; height: 56px; align-self: center; }
.gate-title { margin: 4px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.gate-message { margin: 0 0 8px; color: var(--text-dim); font-size: 14px; line-height: 1.5; }
.gate-card input {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: 0;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px+ stops iOS zooming in */
  text-align: center;
  user-select: text;
}
.gate-card input:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.gate-card input:disabled { opacity: 0.6; }
.gate-card input[hidden], .gate-card button[hidden] { display: none; }
#gate-code:not(:placeholder-shown) { letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.gate-card .primary-button { height: 46px; border-radius: 10px; font-size: 16px; }
.link-button {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
}
.gate-error { min-height: 20px; margin: 0; color: var(--danger); font-size: 14px; }
.gate .credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(20px, env(safe-area-inset-bottom));
}

/* "Designed by Optional": the credit line with Optional's mark (ink ring, cobalt dot). */
.credit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 24px 16px 8px;
  color: var(--text-dim);
  font-size: 12px;
}
.optional-mark { width: 14px; height: 14px; flex-shrink: 0; color: var(--text); }
.optional-mark .dot { fill: var(--optional-cobalt); }

/* Header ------------------------------------------------------------------ */

#header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  -webkit-app-region: drag;
}

#header > * { -webkit-app-region: no-drag; }

.back {
  width: 28px;
  height: 28px;
  padding: 6px;
  border: 0;
  border-radius: 7px;
  background: var(--kbd-bg);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.back:hover { color: var(--text); }

#search {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
}
#search::placeholder { color: var(--text-faint); }

.header-title { flex: 1; font-size: 16px; font-weight: 600; }

/* Content ----------------------------------------------------------------- */

#content {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  min-height: 0;
}

#content::-webkit-scrollbar { width: 8px; }
#content::-webkit-scrollbar-thumb { background: var(--kbd-bg); border-radius: 4px; }

.section-title {
  padding: 10px 10px 5px;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
}

.item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  cursor: default;
}
.item:hover { background: var(--hover); }
.item.selected { background: var(--selected); }

.icon {
  --tint: #8e8e93;
  width: 22px;
  height: 22px;
  padding: 3px;
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--tint);
  background: color-mix(in srgb, var(--tint) 18%, transparent);
}

.icon.avatar {
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: var(--tint);
  font-size: 12px;
  font-weight: 700;
}

.item-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
}
.item-title { overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; max-width: 70%; }
.item-subtitle { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }

.accessories { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.accessory { color: var(--text-faint); font-size: 12px; }

.tag {
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--kbd-bg);
  color: var(--text-dim);
  font-size: 11px;
}
.tag.mono { font-family: var(--font-mono); }

.badge { display: inline-block; width: 14px; height: 14px; flex-shrink: 0; }
.badge.star { color: #f7c948; }
.badge.star svg { fill: currentColor; }
.badge.pin { color: var(--accent); }

.empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 24px;
  color: var(--text-faint);
  text-align: center;
  white-space: pre-line;
}
.empty.small { height: auto; padding: 24px 12px; font-size: 13px; }

/* Quicklink icons */
.icon.favicon { padding: 3px; background: #fff; object-fit: contain; }
/* Uploaded images fill the whole rounded square, edge to edge. */
/* Uploaded images get the same white tile and inset as site icons, so they match in size in
   both light mode (where the tile blends in) and dark mode (where it shows). */
.icon.custom { padding: 3px; background: #fff; object-fit: cover; }
.icon.emoji { display: grid; place-items: center; padding: 0; background: var(--kbd-bg); font-size: 14px; line-height: 1; }
.badge.check { color: var(--accent); width: 16px; height: 16px; }

/* Row ⋯ button: shown on hover/selection on desktop, always on touch */
.row-more {
  width: 28px;
  height: 28px;
  padding: 5px;
  margin-right: -4px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
}
.row-more:hover { background: var(--kbd-bg); color: var(--text); }
.item:hover .row-more, .item.selected .row-more,
.note-row:hover .row-more, .note-row.selected .row-more,
html.touch .row-more { opacity: 1; }
.item, .note-row { -webkit-touch-callout: none; }

.group { display: contents; }

/* Calculator result card */

.item.calc {
  height: 112px;
  gap: 0;
  padding: 0;
  margin: 2px 0 6px;
  border: 1px solid var(--border);
}
.calc-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 100%;
  padding: 0 16px;
}
.calc-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 26px;
  font-weight: 600;
  user-select: text;
}
.calc-value.expr { font-weight: 500; color: var(--text-dim); }
.calc-label {
  padding: 1px 8px;
  border-radius: 5px;
  background: var(--kbd-bg);
  color: var(--text-dim);
  font-size: 11px;
}
.calc-arrow { width: 22px; height: 22px; color: var(--text-faint); flex-shrink: 0; }

/* Notes split view -------------------------------------------------------- */

#content.notes {
  display: flex;
  padding: 0;
  overflow: hidden;
}

.notes-list {
  width: 38%;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 6px 8px;
  border-right: 1px solid var(--border);
}

.note-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: default;
}
.note-row:hover { background: var(--hover); }
.note-row.selected { background: var(--selected); }
.note-row-text { flex: 1; min-width: 0; }
.note-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}
.note-row-title .badge { width: 12px; height: 12px; }
.note-row-sub {
  margin-top: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text-dim);
  font-size: 12px;
}

.note-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.note-editor {
  flex: 1;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  user-select: text;
}
.note-editor::placeholder { color: var(--text-faint); }

.note-meta {
  padding: 6px 20px 8px;
  color: var(--text-faint);
  font-size: 11px;
}

.note-editor[hidden], .note-preview[hidden] { display: none; }
.note-editor { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; }

.note-preview {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 22px;
  cursor: text;
  user-select: text;
}
.note-preview .empty { height: 100%; cursor: default; }

/* Rendered Markdown */

.markdown { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 {
  margin: 1.1em 0 0.4em;
  line-height: 1.25;
  font-weight: 650;
}
.markdown h1 { font-size: 1.6em; }
.markdown h2 { font-size: 1.3em; }
.markdown h3 { font-size: 1.12em; }
.markdown h4, .markdown h5, .markdown h6 { font-size: 1em; color: var(--text-dim); }
.markdown p { margin: 0 0 0.8em; }
.markdown a { color: #4a9eff; text-decoration: none; cursor: pointer; }
.markdown a:hover { text-decoration: underline; }
.markdown strong { font-weight: 650; }
.markdown del { color: var(--text-dim); }
.markdown mark { padding: 0 2px; border-radius: 3px; background: color-mix(in srgb, #f7c948 40%, transparent); color: inherit; }
.markdown code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--kbd-bg);
  font-family: var(--font-mono);
  font-size: 0.88em;
}
.markdown pre {
  margin: 0 0 0.9em;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  overflow-x: auto;
}
.markdown pre code { padding: 0; background: none; font-size: 12.5px; line-height: 1.5; }
.markdown blockquote {
  margin: 0 0 0.9em;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--border);
  color: var(--text-dim);
}
.markdown blockquote p { margin: 0; }
.markdown hr { margin: 1.2em 0; border: 0; border-top: 1px solid var(--border); }
.markdown ul, .markdown ol { margin: 0 0 0.8em; padding-left: 1.5em; }
.markdown li > ul, .markdown li > ol { margin: 0.15em 0 0.15em; }
.markdown li { margin: 0.15em 0; }
.markdown li > p { margin: 0; }
.markdown li.task { list-style: none; margin-left: -1.4em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.markdown li.task > span { flex: 1; }
.markdown li.task > ul, .markdown li.task > ol { flex-basis: 100%; margin-left: 1.4em; }
.markdown li.task input { margin: 0; accent-color: var(--accent); cursor: pointer; transform: translateY(2px); }
.markdown li.task.done > span { color: var(--text-dim); text-decoration: line-through; }
.markdown table { margin: 0 0 0.9em; border-collapse: collapse; font-size: 13px; }
.markdown th, .markdown td { padding: 5px 10px; border: 1px solid var(--border); }
.markdown th { background: var(--hover); font-weight: 600; text-align: left; }

/* Form -------------------------------------------------------------------- */

.form-body { padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; }

.form-row { display: flex; align-items: flex-start; gap: 16px; }
.form-label {
  width: 90px;
  padding-top: 7px;
  flex-shrink: 0;
  text-align: right;
  color: var(--text-dim);
  font-size: 13px;
}
.form-field { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.form-field input[type="text"] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  user-select: text;
}
.form-field input[type="text"]:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.form-hint { color: var(--text-faint); font-size: 12px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; padding-top: 7px; color: var(--text-dim); font-size: 13px; }
.checkbox-row input { margin: 0; accent-color: var(--accent); }

.form-intro { margin: 0 0 4px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.form-actions { display: flex; justify-content: flex-end; }
.form-field input[type="email"] {
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  user-select: text;
}
.form-field input[type="email"]:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.form-field input:disabled { opacity: 0.6; }
.form-hint a { color: var(--accent); }
.primary-button {
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.primary-button:disabled { opacity: 0.6; cursor: default; }

.input-with-button { display: flex; gap: 8px; }
.input-with-button input { flex: 1; min-width: 0; }
.input-with-button .small-button { flex-shrink: 0; }

/* Icon picker */
.icon-picker { display: flex; flex-direction: column; gap: 8px; }
.icon-picker-top { display: flex; align-items: center; gap: 10px; }
.icon-preview { display: grid; place-items: center; width: 32px; height: 32px; }
.icon-preview .icon { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
.segmented { display: flex; padding: 2px; border-radius: 8px; background: var(--kbd-bg); }
.segmented button {
  padding: 5px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.segmented button.active { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.icon-extra { display: flex; gap: 8px; align-items: center; }
.icon-extra[hidden] { display: none; }
.icon-extra input[type="text"] { flex: 1; min-width: 0; }
.form-field .icon-emoji-input { flex: 0 0 90px !important; text-align: center; font-size: 18px; }
.small-button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-elev);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

/* Footer ------------------------------------------------------------------ */

#footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 10px 0 14px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elev) 40%, var(--bg));
  flex-shrink: 0;
  font-size: 12px;
}

.footer-left { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-dim); }
.logo { width: 15px; height: 15px; flex-shrink: 0; }
.toast {
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, #4cd964 18%, transparent);
  color: #4cd964;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.toast.show { opacity: 1; }
.toast.has-action { display: inline-flex; align-items: center; gap: 10px; pointer-events: auto; }
.toast:not(.show) { pointer-events: none; }
.toast-action {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.footer-right { display: flex; align-items: center; gap: 4px; }
.hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.hint:hover { background: var(--hover); }
.hint[hidden] { display: none; }
.divider { width: 1px; height: 14px; margin: 0 4px; background: var(--border); }

/* Action panel ------------------------------------------------------------ */

.action-panel {
  position: absolute;
  right: 10px;
  bottom: 46px;
  width: 320px;
  max-height: 340px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 10;
}
.action-panel[hidden] { display: none; }

.action-list { overflow-y: auto; padding: 6px; }
.action {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px;
  border-radius: 7px;
}
.action:hover { background: var(--hover); }
.action.selected { background: var(--selected); }
.action.danger { color: var(--danger); }
.action-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-dim); }
.action.danger .action-icon { color: var(--danger); }
.action-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#action-search {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-top: 1px solid var(--border);
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}
#action-search::placeholder { color: var(--text-faint); }

/* Dialog ------------------------------------------------------------------ */

.dialog-backdrop {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20;
}
.dialog-backdrop[hidden] { display: none; }
.dialog {
  width: 300px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  text-align: center;
}
.dialog-title { font-weight: 600; font-size: 15px; }
.dialog-message { margin: 6px 0 18px; color: var(--text-dim); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.dialog-buttons { display: flex; gap: 8px; }
.dialog-buttons button {
  flex: 1;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: var(--kbd-bg);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.dialog-buttons button.danger { background: var(--danger); color: #fff; }
.dialog-buttons button.danger kbd { background: rgba(255, 255, 255, 0.2); color: #fff; }
.dialog-buttons button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Touch & phone --------------------------------------------------------- */

.hint .more { display: none; }
html.touch .hint kbd, html.touch .action kbd { display: none; }
html.touch .hint .more { display: inline; font-size: 16px; line-height: 1; }
html.touch .item:hover:not(.selected),
html.touch .note-row:hover:not(.selected),
html.touch .action:hover:not(.selected) { background: none; }
/* No keyboard selection on touchscreens; show press feedback instead. */
html.touch .item.selected, html.touch .note-row.selected { background: none; }
html.touch .item:active, html.touch .note-row:active { background: var(--selected); }
html.touch body { touch-action: manipulation; } /* no double-tap-zoom delay on taps */

.brandbar, .tabbar, .search-add, .calc-keys, .note-keys { display: none; }

@media (max-width: 640px) {
  /* Brand header on top, content, then the search bar and tabs at the bottom. */
  /* Pin the app to the viewport edges. The page itself never scrolls, so iOS has nothing to
     blur under the status bar. */
  html, body { overscroll-behavior: none; }
  body { position: fixed; inset: 0; }
  #app {
    position: fixed;
    inset: 0;
    height: auto;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  /* While the on-screen keyboard is up, shrink to the space above it. */
  html.kbd-open #app { top: var(--app-top, 0px); bottom: auto; height: var(--app-height); }
  .brandbar { order: 0; }
  #content { order: 1; }
  #header { order: 2; }
  .tabbar { order: 3; }

  .brandbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    height: calc(54px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0 14px;
    background: var(--bg); /* solid under the status bar */
    position: relative;
    z-index: 6;
    border-bottom: 1px solid var(--border);
  }
  .brand-logo { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; }
  .brand-logo svg { width: 100%; height: 100%; stroke: none; }
  .brand-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
  }
  #app:not(.show-logo) .brand-logo { display: none; }
  .brand-back, .brand-more {
    width: 38px;
    height: 38px;
    padding: 9px;
    margin-left: -6px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--text);
    flex-shrink: 0;
  }
  .brand-more { margin-left: 0; color: var(--text-dim); }
  .brand-back[hidden], .brand-more[hidden], .brand-primary[hidden] { display: none; }
  .brand-primary {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 17px;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    flex-shrink: 0;
  }

  #header {
    height: 62px;
    padding: 9px 12px;
    border-top: 1px solid var(--border);
    border-bottom: 0;
  }
  #header .back, #header .header-title { display: none; }
  #search {
    height: 44px;
    padding: 0 16px;
    border-radius: 22px;
    background: var(--bg-elev);
    font-size: 17px; /* 16px+ stops iOS zooming in on focus */
  }
  #app.no-search #header { display: none; }
  .search-add {
    display: block;
    width: 44px;
    height: 44px;
    padding: 11px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
  }
  .search-add svg { stroke-width: 2.5; }
  .search-add[hidden] { display: none; }

  .calc-keys {
    order: 2; /* just above the search bar (which comes next in the page) */
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
    padding: 8px 12px 0;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .calc-keys[hidden] { display: none; }
  .note-keys {
    order: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg);
    flex-shrink: 0;
  }
  .note-keys[hidden] { display: none; }
  .note-keys button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--bg-elev);
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 1px 0 var(--border);
    touch-action: manipulation;
  }
  .note-keys button:active { background: var(--selected); }
  .note-key-icon { width: 18px; height: 18px; flex-shrink: 0; }
  .calc-keys button {
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: var(--bg-elev);
    color: var(--text);
    font-size: 19px;
    font-weight: 500;
    box-shadow: 0 1px 0 var(--border);
    touch-action: manipulation;
  }
  .calc-keys button:active { background: var(--selected); }
  .calc-keys:not([hidden]) + #header { border-top: 0; }

  .tabbar {
    display: flex;
    flex-shrink: 0;
    /* Sit closer to the home indicator than the full safe area (34px on most iPhones). */
    padding: 2px 4px max(6px, calc(env(safe-area-inset-bottom) - 18px));
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elev) 40%, var(--bg));
  }
  .tabbar button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 0 6px;
    border: 0;
    background: none;
    color: var(--text-faint);
    font-size: 11px;
    font-weight: 500;
  }
  .tabbar button.active { color: var(--accent); }
  .tab-icon { width: 24px; height: 24px; }
  /* Faceted tab icons: full color on the current tab, faded gray on the others. */
  .tab-art { width: 27px; height: 27px; display: grid; place-items: center; }
  .tab-art svg { width: 100%; height: 100%; stroke: none; transition: filter 0.15s, opacity 0.15s; }
  .tabbar button:not(.active) .tab-art svg { filter: grayscale(1); opacity: 0.5; }
  html.kbd-open .tabbar { display: none; }
  html.kbd-open #header { padding-bottom: 9px; }

  .item { height: auto; min-height: 56px; padding: 8px 10px; }
  .item-text { flex-direction: column; align-items: flex-start; gap: 1px; }
  .item-title, .item-subtitle { max-width: 100%; }
  .item-subtitle { font-size: 13px; }
  .accessory { display: none; }
  .icon { width: 30px; height: 30px; padding: 5px; border-radius: 8px; }
  .icon.avatar { font-size: 14px; }

  .item.calc { height: auto; flex-direction: column; gap: 4px; padding: 14px 0; }
  .calc-side { height: auto; }
  .calc-arrow { transform: rotate(90deg); }
  .calc-value { font-size: 24px; }

  #content.notes .notes-list { width: 100%; border-right: 0; }
  #content.notes .note-pane { display: none; }
  #content.notes.show-note .notes-list { display: none; }
  #content.notes.show-note .note-pane { display: flex; }
  .note-row { min-height: 52px; padding: 8px 12px; }
  .note-row-title { font-size: 15px; }
  .note-preview { padding: 14px 16px; }
  .note-editor { padding: 14px 16px; font-size: 16px; }
  .markdown { font-size: 16px; }
  .markdown li.task input { width: 18px; height: 18px; transform: translateY(3px); }

  .form-body { padding: 16px; }
  .form-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .form-label { width: auto; padding-top: 0; text-align: left; }
  .form-field input[type="text"], .form-field input[type="email"] { height: 42px; font-size: 16px; }
  .input-with-button .small-button { height: 42px; padding: 0 14px; font-size: 15px; }
  .form-actions .primary-button { width: 100%; height: 44px; font-size: 16px; }
  .checkbox-row { padding-top: 0; font-size: 15px; }
  .checkbox-row input { width: 20px; height: 20px; }

  /* The footer only carries the toast on phones, floating under the header. */
  #footer {
    position: absolute;
    top: calc(62px + env(safe-area-inset-top));
    left: 0;
    right: 0;
    height: auto;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: none;
    z-index: 5;
  }
  #footer .logo, #footer-title, .footer-right { display: none; }
  .toast { margin: 0; padding: 6px 14px; border-radius: 16px; font-size: 13px; background: color-mix(in srgb, #4cd964 22%, var(--bg)); }

  .action-panel {
    top: calc(56px + env(safe-area-inset-top));
    left: 8px;
    right: 8px;
    bottom: auto;
    width: auto;
    max-height: 60dvh;
  }
  .action { height: 46px; font-size: 15px; }
  #action-search { height: 46px; font-size: 16px; }
  /* The + menu: anchored above the search bar (bottom is set when it opens), short and to the right. */
  .action-panel.from-bottom { top: auto; left: auto; width: min(260px, calc(100% - 16px)); transform-origin: bottom right; }
  .action-panel.from-bottom #action-search { display: none; }
  .action-panel.from-bottom .action kbd { display: none; }
  .action-panel.from-bottom .action { height: 52px; font-size: 16px; }
  .action-panel.from-bottom .action.selected { background: none; }
  .action-panel.from-bottom .action:active { background: var(--selected); }

  .dialog { width: calc(100% - 48px); max-width: 340px; }
  .dialog-buttons button { height: 44px; font-size: 15px; }
}

/* Motion ---------------------------------------------------------------------- */

@keyframes enter-forward { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes enter-back { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes enter-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

#content.enter-forward { animation: enter-forward 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
#content.enter-back { animation: enter-back 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
#content.enter-fade { animation: enter-fade 0.16s ease-out; }
.action-panel:not([hidden]) { animation: pop-in 0.14s ease-out; transform-origin: top right; }
.action-panel.from-bottom:not([hidden]) { animation-name: pop-up; }
@keyframes pop-up { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
.dialog-backdrop:not([hidden]) { animation: fade-in 0.14s ease-out; }
.dialog-backdrop:not([hidden]) .dialog { animation: pop-in 0.16s ease-out; }
.item, .note-row, .action, .tabbar button, .search-add, .brand-primary { transition: background-color 0.12s, color 0.12s, transform 0.12s; }
.search-add:active, .brand-primary:active, .primary-button:active { transform: scale(0.94); }

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

/* Swipe actions (touch) -------------------------------------------------------- */

.swipeable { position: relative; overflow: hidden; touch-action: pan-y; }
.swipeable > * { transform: translateX(var(--dx, 0px)); }
.swipeable.swipe-settle > * { transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.swipeable[data-swipe="left"] { background: color-mix(in srgb, var(--danger) 55%, transparent) !important; }
.swipeable[data-swipe="right"] { background: color-mix(in srgb, var(--swipe-right) 55%, transparent) !important; }
.swipeable.swipe-armed[data-swipe="left"] { background: var(--danger) !important; }
.swipeable.swipe-armed[data-swipe="right"] { background: var(--swipe-right) !important; }
.swipeable[data-swipe]:not([data-swipe=""])::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}
.swipeable[data-swipe="left"]::before { content: attr(data-left-label); right: 18px; }
.swipeable[data-swipe="right"]::before { content: attr(data-right-label); left: 18px; }

/* Bigger tap targets on phones: lists as larger rows in rounded groups. */
@media (max-width: 640px) {
  #content { padding: 4px 14px 14px; }
  .section-title { padding: 18px 4px 8px; font-size: 14px; }

  .group {
    display: block;
    border-radius: 16px;
    background: var(--bg-elev);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
  }
  .group > .item, .group > .note-row {
    position: relative;
    min-height: 60px;
    margin: 0;
    padding: 8px 4px 8px 14px;
    border-radius: 0;
    gap: 14px;
  }
  /* Hairline dividers, inset past the icon like iPhone Settings */
  .group > .item + .item::after, .group > .note-row + .note-row::after {
    content: '';
    position: absolute;
    top: 0;
    left: 66px;
    right: 0;
    border-top: 1px solid var(--border);
  }
  .group > .note-row + .note-row::after { left: 14px; }
  .group .icon { width: 38px; height: 38px; padding: 6px; border-radius: 10px; }
  .group .icon.avatar, .group .icon.emoji { padding: 0; font-size: 17px; }
  .group .icon.favicon { padding: 5px; }
  .group .icon.custom { padding: 5px; }
  .group .item-title, .group .note-row-title { font-size: 17px; }
  .group .item-subtitle { font-size: 14px; }
  .group .badge { width: 17px; height: 17px; }
  .row-more { width: 44px; height: 44px; padding: 12px; margin-right: 0; }

  #content.notes .notes-list { padding: 4px 14px 14px; }
}

/* Reminders ------------------------------------------------------------------ */

.markdown li.task .reminder-add, .markdown li.task .reminder-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  align-self: center;
}
.markdown li.task .reminder-add {
  width: 30px;
  height: 30px;
  margin: -6px -4px -6px 0;
  padding: 7px;
  border-radius: 8px;
  background: none;
  color: var(--text-faint);
  opacity: 0.55;
}
.markdown li.task:hover .reminder-add, html.touch .markdown li.task .reminder-add { opacity: 1; }
.markdown li.task .reminder-add svg { width: 16px; height: 16px; }
.markdown li.task .reminder-chip {
  padding: 2px 9px 2px 7px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.markdown li.task .reminder-chip svg { width: 13px; height: 13px; }
.markdown li.task .reminder-chip.overdue { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.markdown li.task .reminder-chip.done { background: var(--kbd-bg); color: var(--text-faint); text-decoration: none; }

.sheet-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  animation: fade-in 0.14s ease-out;
}
.sheet {
  width: 100%;
  max-width: 420px;
  margin: 0 10px 10px;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius: 18px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  animation: sheet-up 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sheet-up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-title { margin-bottom: 12px; font-size: 17px; font-weight: 600; text-align: center; }
.sheet-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sheet-quick button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.sheet-quick small { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.sheet-custom { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; color: var(--text-dim); font-size: 13px; }
.sheet-input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.sheet-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.sheet-buttons button { height: 42px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--kbd-bg); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; }
.sheet-buttons .primary-button { background: var(--accent); color: #fff; }
.sheet-buttons .danger-text { margin-right: auto; background: none; color: var(--danger); }

/* Tasks ------------------------------------------------------------------- */

.task-check {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  flex-shrink: 0;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.task-check svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; }
.task-check .fill { fill: currentColor; stroke: none; }
.task-check .tick { stroke: var(--bg-elev); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.task-check:hover { color: var(--accent); }
.task-check.status-progress { color: var(--accent); }
.task-check.status-done { color: var(--accent); }
.task-check:active { transform: scale(0.88); }
.item.task-overdue .item-subtitle { color: var(--danger); }
.item.task-row .item-title { white-space: normal; overflow-wrap: anywhere; flex-shrink: 1; }
.form-field textarea.task-title-input { resize: none; overflow: hidden; line-height: 1.35; padding: 6px 10px; }
.item.task-done .item-title { color: var(--text-faint); text-decoration: line-through; }
.badge.bell { color: var(--text-faint); }
.badge.bell svg { width: 100%; height: 100%; }

.form-field input[type="date"], .form-field input[type="time"], .form-field select, .form-field textarea {
  height: 32px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  user-select: text;
  color-scheme: light dark;
}
.form-field textarea { height: auto; padding: 8px 10px; resize: vertical; line-height: 1.45; }
.form-field input[type="date"]:focus, .form-field input[type="time"]:focus,
.form-field select:focus, .form-field textarea:focus { border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.date-time { display: flex; gap: 8px; }
.date-time .picker { position: relative; display: flex; flex: 1.4; min-width: 0; }
.date-time .picker + .picker { flex: 1; }
.date-time .picker input {
  flex: 1;
  display: block;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  -webkit-appearance: none; /* iOS otherwise sizes and centers these itself, ignoring width */
  appearance: none;
  text-align: left;
}
.date-time .picker input::-webkit-date-and-time-value { margin: 0; text-align: left; }
/* iOS draws the chosen date or time at the top of the box; a line height that matches the
   inside of the box centers it. */
.date-time .picker input { line-height: 30px; padding-top: 0; padding-bottom: 0; }
.date-time .picker input::-webkit-date-and-time-value { line-height: 30px; }
.picker-placeholder {
  display: none;
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  line-height: 1;
  pointer-events: none;
}
@supports (-webkit-touch-callout: none) { /* iOS only: other browsers show their own placeholder */
  .picker.is-empty .picker-placeholder { display: block; }
}
.form-field > .segmented { align-self: flex-start; }
.repeat-field { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.repeat-days { display: flex; flex-direction: column; gap: 8px; }
.day-toggles { display: flex; gap: 6px; }
.day-toggle {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.day-toggle.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.day-shortcuts { display: flex; gap: 14px; }
.day-shortcuts .link-button { padding: 0; font-size: 13px; }
.month-day { align-self: flex-start; }

@media (max-width: 640px) {
  .task-check { width: 38px; height: 38px; padding: 4px; }
  .item.task-row { gap: 14px; }
  .form-field input[type="date"], .form-field input[type="time"], .form-field select { height: 42px; font-size: 16px; }
  .date-time .picker input, .date-time .picker input::-webkit-date-and-time-value { line-height: 40px; }
  .form-field textarea { font-size: 16px; }
  .form-field textarea.task-title-input { padding: 10px; }
  .form-field > .segmented, .repeat-field > .segmented { align-self: stretch; }
  .form-field > .segmented button, .repeat-field > .segmented button { flex: 1; padding: 9px 6px; font-size: 14px; }
  .repeat-field { align-items: stretch; }
  .day-toggles { justify-content: space-between; }
  .day-toggle { width: 40px; height: 40px; font-size: 14px; }
}

/* Quicklink categories */
.cat-field { display: flex; flex-direction: column; gap: 8px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
  padding: 4px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.cat-chip.active { border-color: var(--accent); background: var(--accent); color: #fff; }
@media (max-width: 640px) {
  .cat-chip { padding: 7px 13px; font-size: 14px; }
}

/* Sleeker, snappier phone layout ---------------------------------------------- */

/* The bottom bar groups the key rows, search and tabs on phones. On desktop it steps aside
   and the search bar sits on top, as before. */
.bottombar { display: contents; }
#header { order: -1; }

/* True black (OLED) theme: the dark theme with pure black behind everything. */
:root[data-theme="black"] {
  --bg: #000000;
  --bg-elev: #141416;
  --border: rgba(255, 255, 255, 0.1);
  --selected: rgba(255, 255, 255, 0.1);
  --hover: rgba(255, 255, 255, 0.05);
  --kbd-bg: rgba(255, 255, 255, 0.1);
  --text-dim: #9a9aa1;
  --text-faint: #6c6c73;
  --glow-a: transparent;
  --glow-b: transparent;
  --glow-c: transparent;
  color-scheme: dark;
}

@media (max-width: 640px) {
  #header { order: 0; }

  /* Frosted header and bottom bar; the content scrolls underneath both. */
  .brandbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 0.5px solid var(--border);
  }
  .bottombar {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--border);
  }
  .bottombar > * { background: transparent !important; border-top: 0 !important; }
  .tabbar { border-top: 0; }
  #content {
    flex: 1;
    padding-top: calc(54px + env(safe-area-inset-top) + 2px);
    padding-bottom: calc(var(--bottom-h, 140px) + 16px);
    scroll-padding-top: calc(54px + env(safe-area-inset-top));
    scroll-padding-bottom: var(--bottom-h, 140px);
  }
  /* Notebook scrolls its list and note itself, so they get the room for the bars directly. */
  #content.notes { padding: 0; }
  #content.notes .notes-list {
    padding-top: calc(54px + env(safe-area-inset-top) + 2px);
    padding-bottom: calc(var(--bottom-h, 140px) + 16px);
  }
  #content.notes .note-pane {
    padding-top: calc(54px + env(safe-area-inset-top));
    padding-bottom: var(--bottom-h, 140px);
  }

  /* The + sits inside the search field. */
  #header { position: relative; height: 58px; padding: 8px 12px; }
  #search { width: 100%; height: 42px; border-radius: 21px; }
  #header:has(#search-add:not([hidden])) #search { padding-right: 50px; }
  .search-add {
    position: absolute;
    right: 17px;
    top: 50%;
    width: 32px;
    height: 32px;
    padding: 7px;
    transform: translateY(-50%);
  }
  .search-add:active { transform: translateY(-50%) scale(0.88); }

  /* No ⋯ on each row: long-press or swipe a row for its actions. */
  .row-more { display: none !important; }

  /* Tighter rows and smaller icons. */
  .group > .item, .group > .note-row { min-height: 50px; padding: 6px 12px 6px 14px; gap: 12px; }
  .group > .item + .item::after { left: 56px; }
  .group .icon { width: 30px; height: 30px; padding: 5px; border-radius: 8px; }
  .group .icon.avatar, .group .icon.emoji { padding: 0; font-size: 15px; }
  .group .icon.favicon, .group .icon.custom { padding: 4px; }
  .group .item-title, .group .note-row-title { font-size: 16px; }
  .group .item-subtitle { font-size: 13px; }
  .group .badge { width: 15px; height: 15px; }
  .task-check { width: 30px; height: 30px; padding: 3px; }

  /* Quiet section labels. */
  .section-title {
    padding: 18px 6px 6px;
    color: var(--text-faint);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Flat cards with hairline dividers. */
  .group { border-radius: 14px; box-shadow: none; }
  .group > .item + .item::after, .group > .note-row + .note-row::after { border-top-width: 0.5px; }

  /* Press feedback the moment a finger lands. */
  .group > .item, .group > .note-row { transition: background-color 0.06s, scale 0.1s; }
  html.touch .group > .item:active, html.touch .group > .note-row:active { background: var(--selected); scale: 0.985; }
  .tabbar button:active .tab-art { scale: 0.88; }
  .tab-art { transition: scale 0.1s; }
  .brand-back:active, .brand-more:active { opacity: 0.5; }
}

/* Quicker motion: tabs switch instantly; slides, menus and sheets are shorter and springier. */
#content.enter-fade { animation: none; }
#content.enter-forward { animation: enter-forward 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
#content.enter-back { animation: enter-back 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes enter-forward { from { opacity: 0.4; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes enter-back { from { opacity: 0.4; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.action-panel:not([hidden]) { animation-duration: 0.1s; }
.dialog-backdrop:not([hidden]), .dialog-backdrop:not([hidden]) .dialog { animation-duration: 0.12s; }
.sheet { animation-duration: 0.14s !important; }

/* Large titles, pull-to-search and the floating + (phones) -------------------- */

.large-title, .fab { display: none; }
.icon.swatch { padding: 0; border-radius: 50%; } /* Background previews in Appearance */

@media (max-width: 640px) {
  /* A big title at the top of each tab; the small one in the header fades in on scroll. */
  .large-title {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 2px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
  }
  #content.notes .large-title { margin-bottom: 10px; }
  .large-title-icon { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; }
  .large-title-icon svg { width: 100%; height: 100%; stroke: none; }
  .brand-title, .brand-logo { transition: opacity 0.15s; }
  .brandbar { transition: background-color 0.15s, border-color 0.15s; }
  #app.has-large-title:not(.scrolled) .brand-title,
  #app.has-large-title:not(.scrolled) .brand-logo { opacity: 0; }
  /* At the top of a tab the header is empty and invisible, and the large title sits right
     under the status bar; the compact header fades in once the title scrolls away. */
  #app.has-large-title:not(.scrolled) .brandbar {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    pointer-events: none;
  }
  #app.has-large-title:not(.scrolled) .brand-more { opacity: 0; }
  .brand-more { transition: opacity 0.15s; }
  #app.has-large-title #content { padding-top: calc(env(safe-area-inset-top) + 10px); }
  #app.has-large-title #content.notes { padding-top: 0; }
  #app.has-large-title #content.notes .notes-list { padding-top: calc(env(safe-area-inset-top) + 10px); }
  .large-title-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .large-title-more {
    width: 40px;
    height: 40px;
    margin-right: -6px;
    padding: 9px;
    border: 0;
    border-radius: 20px;
    background: none;
    color: var(--text-dim);
    flex-shrink: 0;
  }
  .large-title-more:active { background: var(--selected); }

  /* Search tucked away: just the tabs at the bottom; pull down or tap the magnifier. */
  #app.search-tucked #header { display: none; }

  /* The floating + sits above the bottom bar, at the right. */
  .fab {
    display: grid;
    place-items: center;
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(var(--bottom-h, 70px) + 14px);
    z-index: 7;
    width: 54px;
    height: 54px;
    padding: 15px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: scale 0.1s;
  }
  .fab svg { stroke-width: 2.6; }
  .fab:active { scale: 0.9; }
  .fab[hidden], html.kbd-open .fab { display: none; }
  /* Room so the last row of a long list can scroll clear of the floating +. */
  #app.fab-room #content { padding-bottom: calc(var(--bottom-h, 70px) + 80px); }
  #app.fab-room #content.notes { padding-bottom: 0; }
  #app.fab-room #content.notes .notes-list { padding-bottom: calc(var(--bottom-h, 70px) + 80px); }

  /* No rubber-band bounce on lists: the pull-to-search gesture shows its own hint instead,
     and a screen that fits doesn't move at all. */
  #content, #content .notes-list { overscroll-behavior-y: none; }
  #app::after {
    content: 'Release to search';
    position: absolute;
    bottom: calc(var(--bottom-h, 70px) + 16px); /* just above the bar, where search appears */
    left: 50%;
    z-index: 8;
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transform: translate(-50%, 6px);
    transition: opacity 0.12s, transform 0.12s;
    pointer-events: none;
  }
  #app.pull-armed::after { opacity: 1; transform: translate(-50%, 0); }
}

/* The mesh glow behind the top of the app and the sign-in screen; it stays put as lists scroll.
   The first layer fades the glow in from the background color, so the app's top edge matches
   iPhone's solid status bar (which is painted in the background color) instead of meeting it
   with a hard line. */
#app, .gate {
  background:
    /* plain behind the title at the top, fading into the glow just below it */
    linear-gradient(to bottom, var(--bg) 0, var(--bg) 70px, transparent 130px),
    /* plain behind the tab bar at the bottom, fading out just above it */
    linear-gradient(to top, var(--bg) 0, var(--bg) var(--bottom-h, 70px), transparent calc(var(--bottom-h, 70px) + 70px)),
    /* soft blooms through the body; each fades out before the sides */
    radial-gradient(62% 22% at 28% 22%, var(--glow-a), transparent 74%),
    radial-gradient(62% 24% at 72% 34%, var(--glow-b), transparent 74%),
    radial-gradient(60% 22% at 32% 52%, var(--glow-c), transparent 74%),
    radial-gradient(62% 22% at 70% 68%, var(--glow-a), transparent 74%),
    radial-gradient(56% 20% at 34% 82%, var(--glow-b), transparent 74%),
    var(--bg);
}

/* Phones: cards are lightly frosted so the glow behind them shows through softly. */
@media (max-width: 640px) {
  .group {
    background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
  }
  :root[data-theme="black"] .group { background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Standard background: no glow, solid cards, and the original charcoal in dark mode. */
/* !important: the light theme's rule is more specific and would otherwise put the glow back. */
:root[data-bg="standard"] {
  --glow-a: transparent !important;
  --glow-b: transparent !important;
  --glow-c: transparent !important;
}
:root[data-bg="standard"][data-theme="dark"] {
  --bg: #1c1c1e;
  --bg-elev: #2a2a2d;
  --border: rgba(255, 255, 255, 0.08);
  --text-dim: #9a9aa1;
  --text-faint: #6c6c73;
  --selected: rgba(255, 255, 255, 0.09);
  --hover: rgba(255, 255, 255, 0.045);
  --kbd-bg: rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root[data-bg="standard"]:not([data-theme]) {
    --bg: #1c1c1e;
    --bg-elev: #2a2a2d;
    --border: rgba(255, 255, 255, 0.08);
    --text-dim: #9a9aa1;
    --text-faint: #6c6c73;
    --selected: rgba(255, 255, 255, 0.09);
    --hover: rgba(255, 255, 255, 0.045);
    --kbd-bg: rgba(255, 255, 255, 0.1);
  }
}
@media (max-width: 640px) {
  :root[data-bg="standard"] .group { background: var(--bg-elev); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Little previews in Appearance */
.icon.bg-swatch-glow {
  background:
    radial-gradient(70% 70% at 25% 25%, #5ce1e6, transparent 70%),
    radial-gradient(70% 70% at 80% 40%, #2a8cff, transparent 70%),
    radial-gradient(70% 70% at 40% 85%, #a37cff, transparent 70%),
    #e9eef7;
}
.icon.bg-swatch-standard { background: #d9d9de; box-shadow: inset 0 0 0 1px var(--border); }

/* Ocean: a water tint with rippling caustics (the light patterns on a pool floor). Two caustic
   layers drift in different directions at different speeds, so the light keeps shifting. Only
   transforms animate; browsers pause it when the app is hidden, and Reduce Motion stops it. */
.glow { display: none; }
:root {
  --water-top: #0a2740;
  --water-bottom: #0b1e38;
  --caustic-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0105 0.0125' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.88  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --caustic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0085 0.0095' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.5  0 0 0 0 0.88  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --caustic-a-opacity: 0.32;
  --caustic-b-opacity: 0.22;
}
:root[data-theme="light"] {
  --water-top: #dff3fa;
  --water-bottom: #cde6f5;
  --caustic-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0105 0.0125' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --caustic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0085 0.0095' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
  --caustic-a-opacity: 0.85;
  --caustic-b-opacity: 0.55;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="black"]) {
    --water-top: #dff3fa;
    --water-bottom: #cde6f5;
    --caustic-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0105 0.0125' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
    --caustic-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0085 0.0095' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E");
    --caustic-a-opacity: 0.85;
    --caustic-b-opacity: 0.55;
  }
}
:root[data-bg="ocean"] #app { isolation: isolate; background: var(--bg); }
:root[data-bg="ocean"]:not([data-theme="black"]) .glow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--water-top), var(--water-bottom));
  /* plain behind the title and the tab bar, like the glow */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 70px, #000 130px, #000 calc(100% - var(--bottom-h, 70px) - 70px), transparent calc(100% - var(--bottom-h, 70px)));
  mask-image: linear-gradient(to bottom, transparent 0, transparent 70px, #000 130px, #000 calc(100% - var(--bottom-h, 70px) - 70px), transparent calc(100% - var(--bottom-h, 70px)));
}
:root[data-bg="ocean"] .glow span { display: none; }
:root[data-bg="ocean"] .glow span:nth-child(1),
:root[data-bg="ocean"] .glow span:nth-child(2) {
  display: block;
  position: absolute;
  inset: -720px;
  will-change: transform;
}
:root[data-bg="ocean"] .glow span:nth-child(1) {
  background: var(--caustic-a) 0 0 / 520px 520px repeat;
  opacity: var(--caustic-a-opacity);
  animation: ocean-drift-a 46s linear infinite;
}
:root[data-bg="ocean"] .glow span:nth-child(2) {
  background: var(--caustic-b) 0 0 / 680px 680px repeat;
  opacity: var(--caustic-b-opacity);
  animation: ocean-drift-b 61s linear infinite, ocean-swell 9s ease-in-out infinite alternate;
}
/* Each moves exactly one tile per loop, so the loop is seamless. */
@keyframes ocean-drift-a { from { transform: translate(0, 0); } to { transform: translate(520px, 520px); } }
@keyframes ocean-drift-b { from { transform: translate(0, 0) rotate(0.001deg); } to { transform: translate(-680px, 680px) rotate(0.001deg); } }
@keyframes ocean-swell { from { opacity: calc(var(--caustic-b-opacity) * 0.6); } to { opacity: var(--caustic-b-opacity); } }

/* Aurora: soft ribbons of green, teal and violet light that slowly wave, stretch and breathe,
   like the northern lights. Transform/opacity only; paused when hidden; still with Reduce Motion. */
:root {
  --aurora-sky-top: #06142a;
  --aurora-sky-bottom: #0a1834;
  --aurora-strength: 0.85;
  --aurora-blend: screen;
}
:root[data-theme="light"] {
  --aurora-sky-top: #eef5fb;
  --aurora-sky-bottom: #e8eefa;
  --aurora-strength: 0.5;
  --aurora-blend: normal;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="black"]) {
    --aurora-sky-top: #eef5fb;
    --aurora-sky-bottom: #e8eefa;
    --aurora-strength: 0.5;
    --aurora-blend: normal;
  }
}
:root[data-bg="aurora"] #app { isolation: isolate; background: var(--bg); }
:root[data-bg="aurora"]:not([data-theme="black"]) .glow {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--aurora-sky-top), var(--aurora-sky-bottom));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 70px, #000 130px, #000 calc(100% - var(--bottom-h, 70px) - 70px), transparent calc(100% - var(--bottom-h, 70px)));
  mask-image: linear-gradient(to bottom, transparent 0, transparent 70px, #000 130px, #000 calc(100% - var(--bottom-h, 70px) - 70px), transparent calc(100% - var(--bottom-h, 70px)));
}
:root[data-bg="aurora"] .glow span {
  display: block;
  position: absolute;
  left: -30%;
  width: 160%;
  height: 16%;
  border-radius: 50%;
  filter: blur(26px);
  mix-blend-mode: var(--aurora-blend);
  opacity: var(--aurora-strength);
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}
:root[data-bg="aurora"] .glow span:nth-child(1) {
  top: 16%;
  background: linear-gradient(90deg, transparent 5%, #3dffb0 30%, #2fd3e0 55%, #7b6bff 80%, transparent 95%);
  animation: aurora-wave-a 19s ease-in-out infinite alternate, aurora-breathe 7s ease-in-out infinite alternate;
}
:root[data-bg="aurora"] .glow span:nth-child(2) {
  top: 30%;
  height: 12%;
  background: linear-gradient(90deg, transparent 8%, #2fd3e0 28%, #3dffb0 50%, #2fd3e0 72%, transparent 92%);
  animation: aurora-wave-b 23s ease-in-out infinite alternate, aurora-breathe 9s ease-in-out infinite alternate-reverse;
}
:root[data-bg="aurora"] .glow span:nth-child(3) {
  top: 46%;
  background: linear-gradient(90deg, transparent 6%, #9b6bff 30%, #ff7ad9 52%, #7b6bff 76%, transparent 94%);
  animation: aurora-wave-a 27s ease-in-out infinite alternate-reverse, aurora-breathe 11s ease-in-out infinite alternate;
}
:root[data-bg="aurora"] .glow span:nth-child(4) {
  top: 62%;
  height: 13%;
  background: linear-gradient(90deg, transparent 8%, #3dffb0 32%, #2fd3e0 60%, transparent 90%);
  animation: aurora-wave-b 21s ease-in-out infinite alternate-reverse, aurora-breathe 8s ease-in-out infinite alternate;
}
:root[data-bg="aurora"] .glow span:nth-child(5) {
  top: 76%;
  height: 11%;
  background: linear-gradient(90deg, transparent 10%, #7b6bff 34%, #2fd3e0 62%, transparent 90%);
  animation: aurora-wave-a 25s ease-in-out infinite alternate, aurora-breathe 10s ease-in-out infinite alternate-reverse;
}
@keyframes aurora-wave-a {
  0% { transform: translateX(-10%) skewY(-7deg) scaleY(0.8); }
  50% { transform: translateX(4%) skewY(5deg) scaleY(1.5); }
  100% { transform: translateX(12%) skewY(-3deg) scaleY(1); }
}
@keyframes aurora-wave-b {
  0% { transform: translateX(10%) skewY(6deg) scaleY(1.2); }
  50% { transform: translateX(-6%) skewY(-5deg) scaleY(0.75); }
  100% { transform: translateX(-12%) skewY(4deg) scaleY(1.45); }
}
@keyframes aurora-breathe {
  from { opacity: calc(var(--aurora-strength) * 0.45); }
  to { opacity: var(--aurora-strength); }
}
.icon.bg-swatch-aurora {
  background:
    radial-gradient(80% 30% at 50% 35%, #3dffb0, transparent 70%),
    radial-gradient(80% 30% at 50% 65%, #9b6bff, transparent 70%),
    #0a1834;
}

/* Its preview in Appearance turns slowly. */
.icon.bg-swatch-ocean {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.0105 0.0125' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -7 0 0 0 1.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23c%29'/%3E%3C/svg%3E") 0 0 / 60px 60px,
    linear-gradient(160deg, #7fd6f0, #2a8cff);
  animation: swatch-spin 12s linear infinite;
}
@keyframes swatch-spin { to { transform: rotate(360deg); } }

/* Menu items that use a tab's faceted icon (the + menu) */
.action-icon.art { width: 22px; height: 22px; display: grid; place-items: center; }
.action-icon.art svg { width: 100%; height: 100%; stroke: none; }