/* Pinlight: visual bookmark library. Values measured from the reference at 1440×900. */
@font-face {
  font-family: 'Inter Display';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: 'Tektur';
  src: url('../fonts/tektur-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Body: Inter with automatic optical size (text cut when small, Display cut when large). Headings and CTAs: Tektur. */
  --font: 'Inter Display', ui-sans-serif, system-ui, -apple-system, 'Apple SD Gothic Neo', sans-serif;
  --font-display: 'Tektur', 'Inter Display', ui-sans-serif, system-ui, sans-serif;
  --bg: #f6f6f6;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --ink: #262626;
  --text: #111827;
  --muted: #62656d;
  --faint: #686b72;
  --line: #e5e7eb;
  --line-soft: #ececec;
  --chip: rgba(0, 0, 0, 0.045);
  --chip-hover: rgba(0, 0, 0, 0.08);
  /* Accent tokens: defaults for #51ff9d; js/theme.js rewrites them from the chosen color. */
  --accent: #51ff9d;
  --accent-rgb: 81 255 157;
  --accent-hover: #4ae88f;
  --on-accent: #141414;
  /* Accent as text or outline on the page background, and as a tinted fill (light and dark page). */
  --accent-text: #277a4b;
  --accent-text-dark: #51ff9d;
  --accent-soft: #e0ffed;
  --accent-soft-dark: #1e412d;
  --accent-gradient: linear-gradient(180deg, #82ffb8 0%, #51ff9d 58%, #4ae88f 100%);
  --danger: #c9463d;
  --success: #5ec052;
  --dock: #131315;
  --dock-2: #1d1d1f;
  --dock-3: #252527;
  --dock-line: #333336;
  --dock-text: #e9e9e9;
  --dock-muted: #9a9aa0;
  --preview-shadow: 0 0 16px -4px rgba(2, 6, 23, 0.2), 0 0 0 1px rgba(2, 6, 23, 0.1), 0 4px 8px -4px rgba(2, 6, 23, 0.2);
  --menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.08);
  --modal-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
  --add-bg: #f1f1f1;
  --add-line: #d6d6d6;
  --canvas-bg: #f5f5f7;
  --canvas-dot: #d9d9de;
  --overlay: rgba(0, 0, 0, 0.62);
  --preview-h: 450px;
  --dock-h: 50px;
  --bar-h: 60px;
  --page-pad: 24px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

body.dark {
  --bg: #0e0e0e;
  --surface: #171717;
  --surface-2: #1c1c1c;
  --ink: #f2f2f2;
  --text: #f2f2f2;
  --muted: #a0a0a5;
  --faint: #85858b;
  --line: #2a2a2a;
  --line-soft: #242424;
  --chip: rgba(255, 255, 255, 0.07);
  --chip-hover: rgba(255, 255, 255, 0.12);
  --accent-soft: var(--accent-soft-dark);
  --accent-text: var(--accent-text-dark);
  --add-bg: #141414;
  --add-line: #333;
  --canvas-bg: #0e0e0e;
  --canvas-dot: #2a2a2a;
  --menu-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --preview-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  font-size: 12px;
  color: var(--ink);
  background: var(--bg);
  /* Each size gets its own cut of Inter: sturdy text shapes for small UI text, the Display cut for large headings. */
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* Rows and pills that sit in a scrolling or clipping strip draw the ring inside, where nothing cuts it. */
.dock-tag:focus-visible,
.board-pill:focus-visible,
.settings-link:focus-visible,
.side-item:focus-visible,
.menu-item:focus-visible,
.command-item:focus-visible {
  outline-offset: -2px;
}

/* Focus scrolls a control only just into view; leave room at the edge for its ring. */
.modal,
.settings-panel,
.inspect-panel,
.menu,
.command-list,
.add-bar-chips.is-open,
.list-sidebar {
  scroll-padding: 8px;
}

.i {
  flex-shrink: 0;
  display: block;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.pressable {
  transition: transform 120ms ease, background-color 150ms ease, color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}

.pressable:active {
  transform: scale(0.97);
}

/* ---------------- App bar: brand, board, search, plan ---------------- */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 560px) minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  height: var(--bar-h);
  padding: 0 var(--page-pad);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}

.app-bar-start {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.app-bar .logo-mark {
  width: 28px;
  height: 28px;
}

.app-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.app-title {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-total {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.app-search {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 10px 0 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.app-search:hover {
  border-color: color-mix(in srgb, var(--line) 50%, var(--muted));
}

.app-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.4);
}

.app-search-icon {
  position: absolute;
  left: 12px;
  display: grid;
  color: var(--muted);
}

#app-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}

#app-search-input::placeholder {
  color: var(--muted);
}

/* The browser's own clear button is replaced by one that matches the bar. */
#app-search-input::-webkit-search-cancel-button {
  display: none;
}

.app-search-clear {
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  color: var(--muted);
}

.app-search-clear:hover {
  background: var(--chip-hover);
  color: var(--text);
}

.app-bar.is-searching .app-search-clear {
  display: grid;
}

.app-search-meta {
  margin: 0 6px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.app-search-key {
  min-width: 0;
  height: 22px;
  box-shadow: none;
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  font: 500 11px/1 var(--font);
  color: var(--muted);
}

.app-bar.is-searching .app-search-key,
.app-search:focus-within .app-search-key {
  display: none;
}

.search-suggest {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--menu-shadow);
}

.suggest-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}

.suggest-option:hover,
.suggest-option.is-active {
  background: var(--chip-hover);
}

.suggest-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  color: var(--text);
}

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

.app-bar-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.app-bar-end .icon-btn {
  width: 34px;
  height: 34px;
}

.plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.plan-chip:hover {
  border-color: var(--ink);
  color: var(--text);
}

/* Near the free limit the chip turns accent, instead of a banner shouting from the start. */
.plan-chip.is-near {
  border-color: transparent;
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ---------------- Board switcher ---------------- */
.board-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--page-pad) 0;
  flex-wrap: wrap;
}

/* Notes above the library: a Pro view being tried, the "Similar" view. Each says how to leave. */
.view-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 12px var(--page-pad) 0;
  padding: 10px 12px 10px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.view-note p {
  /* Text and buttons share a line when there is room; on a phone the buttons move below. */
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  font-size: 14px;
}

.view-note strong {
  font-weight: 600;
}

.view-note span {
  color: var(--muted);
}

.view-note .btn {
  flex-shrink: 0;
}

.view-note-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* A Free user trying a Pro view sees the first few sites in it; the rest wait behind a blur. */
.is-preview-locked {
  filter: blur(6px);
  opacity: 0.5;
}

.card.is-similar-source .card-preview {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
}

.similar-why {
  margin: 10px 16px 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.board-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap;
}

body.dark .board-pill {
  color: var(--faint);
  background: #111;
  border-color: #2e2e2e;
}

.board-pill:hover {
  border-color: #d1d5db;
  color: var(--text);
}

.board-pill.is-active {
  background: #111827;
  border-color: #111827;
  color: #f9fafb;
}

body.dark .board-pill.is-active {
  background: #f9fafb;
  border-color: #f9fafb;
  color: #111827;
}

.board-pill-add {
  border-style: dashed;
  background: transparent;
}

.board-pill-remove {
  display: none;
  opacity: 0.6;
  margin-left: 2px;
}

.board-pill:hover .board-pill-remove {
  display: inline-grid;
}

.board-pill-remove:hover {
  opacity: 1;
}

.board-pill-input {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  width: 120px;
  padding: 0;
}

/* ---------------- Library layout ---------------- */
.library {
  padding: 0 var(--page-pad) calc(var(--dock-h) + 60px + var(--safe-bottom));
  margin-top: 24px;
}

/* After the last built card or row; coming near it builds the next page (builtBookmarks in app.js). */
.more-marker {
  height: 1px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.mode-three .cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mode-long .cards {
  gap: 6px;
  --preview-h: 800px;
}

.mode-fullscreen .cards {
  grid-template-columns: minmax(0, 1fr);
  --preview-h: 88vh;
}

.mode-mobile .cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  --preview-h: 632px;
}

.card {
  position: relative;
  min-width: 0;
  padding-bottom: 24px;
}

/* Cards off screen skip their style and layout: a jump deep into a big library builds thousands at once.
   Skipping also clips a card's contents at its edge, and the preview's shadow, the drop outline and the
   flash reach up to 24px past it, so this is on only where that edge can be widened (not yet in Safari).
   Until a card is drawn once it stands in at the height of one with a row of tags. */
@supports (overflow-clip-margin: 24px) {
  .card {
    content-visibility: auto;
    contain-intrinsic-height: auto calc(var(--preview-h) + 120px);
    overflow-clip-margin: 24px;
  }
}

.mode-three .card,
.mode-long .card {
  padding-bottom: 12px;
}

.card.is-dragging {
  opacity: 0.35;
}

.card.is-drop-target .card-preview {
  outline: 2px dashed var(--accent-text);
  outline-offset: 4px;
}

.card.is-flash .card-preview {
  animation: flash 1.2s ease;
}

@keyframes flash {
  0%,
  100% {
    box-shadow: var(--preview-shadow);
  }
  30% {
    box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.9), var(--preview-shadow);
  }
}

.card-preview {
  position: relative;
  height: var(--preview-h);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--preview-shadow);
  isolation: isolate;
}

.mode-mobile .card {
  width: 340px;
}

.mode-mobile .card-preview {
  border-radius: 10px;
  border: 1px solid #d4d4d8;
}

/* Grid view: columns and page scale come from fitGrid() in app.js; pages render 1280px wide. */
.mode-grid .cards {
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}

.mode-grid .card-frame,
.rd-view .card-frame {
  width: calc(100% / var(--frame-scale, 0.5));
  height: calc(100% / var(--frame-scale, 0.5));
  transform: scale(var(--frame-scale, 0.5));
}

/* Three or more per row: a lighter caption so the pictures lead. */
.cards[data-density='compact'] .card-head {
  min-height: 44px;
  padding: 10px 8px 8px;
  border-bottom: 0;
}

.cards[data-density='compact'] .card-title {
  font-size: 14px;
  line-height: 20px;
}

.cards[data-density='compact'] .card-tags {
  gap: 4px;
  padding: 0 12px;
}

.cards[data-density='compact'] .tag-chip {
  padding: 4px 8px;
  font-size: 11px;
}

/* Card size, at the top of the view menu. */
.size-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  font-size: 13px;
}

.size-step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: inherit;
}

.size-step:hover:not(:disabled) {
  background: var(--chip-hover);
}

.size-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.size-value {
  min-width: 64px;
  text-align: center;
  font-size: 12px;
  opacity: 0.8;
}

/* Other card views render the page at twice the card width, then scale down. */
.card-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  background: #fff;
}

.mode-fullscreen .card-frame {
  width: 100%;
  height: 100%;
  transform: none;
}

.mode-mobile .card-frame {
  width: 390px;
  height: calc(632px / 0.8718);
  transform: scale(0.8718);
}

.card-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(110deg, #f3f3f3 30%, #fafafa 50%, #f3f3f3 70%) 0 0 / 300% 100%;
  animation: shimmer 1.4s linear infinite;
  /* Runs only while its preview is on screen and still loading (cards.js marks .is-on-screen); off screen
     or behind a loaded page it would still cost every frame. */
  animation-play-state: paused;
  z-index: 1;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.is-on-screen:not(.is-loaded) > .card-loading {
  animation-play-state: running;
}

body.dark .card-loading {
  background: linear-gradient(110deg, #161616 30%, #1e1e1e 50%, #161616 70%) 0 0 / 300% 100%;
}

.card-loading img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  opacity: 0.85;
}

.is-loaded > .card-loading {
  opacity: 0;
}

/* When a site can't be previewed live: its own picture if any, where it lives, and ways forward. */
.preview-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  overflow: hidden;
  background: var(--surface-2);
}

.card-preview.is-broken .preview-fallback {
  display: grid;
}

.card-preview.is-broken .card-frame {
  visibility: hidden;
}

.fallback-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fallback-note {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 14px 16px;
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* Over a picture the note becomes a small card, so it stays readable on any image. */
.fallback-picture + .fallback-note {
  align-self: end;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: var(--menu-shadow);
}

.fallback-site {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.fallback-site img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.fallback-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 2px;
}

.fallback-btn {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.fallback-btn:hover {
  border-color: var(--ink);
}

.cards[data-density='compact'] .fallback-reason,
.cards[data-density='compact'] .fallback-btn[title] {
  display: none;
}

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

.card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.video-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  background: #000 center / cover no-repeat;
  cursor: pointer;
}

.video-thumb .play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  backdrop-filter: blur(6px);
  transition: background-color 150ms ease;
}

.video-thumb:hover .play {
  background: var(--accent);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 14px 12px 12px;
  margin: 0 4px;
  border-bottom: 1px solid var(--line);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.card-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sample-badge {
  flex-shrink: 0;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font: 500 12px/1.5 var(--font);
  font-style: normal;
  letter-spacing: 0;
  color: var(--muted);
}

.card-open {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 150ms ease, background-color 150ms ease;
}

.card-open:hover {
  background: var(--chip);
}

.card-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.card:hover .card-actions,
.card:hover .card-open,
.card:focus-within .card-actions,
.card:focus-within .card-open {
  opacity: 1;
}

.card-action {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  color: #6b7280;
  background: var(--chip);
}

.card-action:hover {
  color: var(--ink);
  background: var(--chip-hover);
}

.card-action[data-action='drag'] {
  cursor: grab;
}

.card-desc {
  margin: 12px 16px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 16px 0;
}

.card-tags:empty {
  display: none;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 5px;
  background: var(--chip);
  font-size: 12px;
  line-height: 1.2;
  color: var(--ink);
}

.hide-titles .card-head {
  display: none;
}

.hide-tags .card-tags,
.hide-tags .list-row-tags {
  display: none;
}

/* Add tile */
.add-tile {
  height: var(--preview-h);
  width: 100%;
  border-radius: 6px;
  border: 2px dashed var(--add-line);
  background: var(--add-bg);
  color: var(--faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
}

.add-tile:hover,
.add-tile.is-highlight {
  border-color: var(--accent-text);
  background: rgb(var(--accent-rgb) / 0.08);
  color: var(--accent-text);
}

.mode-mobile .add-tile {
  width: 340px;
}

/* ---------------- Empty state ---------------- */
.empty-state {
  padding: 96px 16px 40px;
  text-align: center;
  color: var(--muted);
}

.empty-illustration {
  width: 104px;
  height: 94px;
  margin: 0 auto 64px;
  border-radius: 8px;
  border: 1.5px solid #e2e2e5;
  background: #ededee;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.dark .empty-illustration {
  background: #1c1c1c;
  border-color: #2a2a2a;
}

.empty-illustration .dots {
  display: flex;
  gap: 4px;
  align-items: center;
}

.empty-illustration .dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: block;
}

.empty-illustration .bar {
  height: 7px;
  border-radius: 4px;
  background: #dcdcde;
}

body.dark .empty-illustration .bar {
  background: #2b2b2b;
}

.empty-state h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--text);
}

.empty-state p {
  margin: 0 auto;
  max-width: 370px;
  font-size: 14px;
  line-height: 1.7;
}

.empty-state .btn {
  margin-top: 20px;
}

/* ---------------- List mode ---------------- */
.library.mode-list {
  padding: 0;
  margin-top: 12px;
}

.list-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: calc(100vh - 50px);
}

.list-layout.is-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.list-sidebar {
  position: sticky;
  top: var(--bar-h);
  height: calc(100vh - var(--bar-h));
  overflow: auto;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 92%, #000 3%);
  padding: 0 0 80px;
}

.list-layout.is-collapsed .list-sidebar {
  overflow: hidden;
  border: 0;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 16px;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
}

.side-item:hover {
  background: var(--chip);
}

.side-item.is-active {
  background: var(--chip-hover);
}

.side-item.is-drop-target {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent-text);
}

.side-item .count {
  color: var(--muted);
  font-size: 12px;
}

.side-item.is-active .count,
.side-item:hover .count {
  color: var(--ink);
}

.side-item .grow {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.side-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--faint);
  text-transform: uppercase;
}

.side-heading button {
  color: var(--faint);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 4px;
}

.side-heading button:hover {
  color: var(--ink);
  background: var(--chip);
}

.side-remove {
  display: none;
  color: var(--faint);
}

.side-item:hover .side-remove {
  display: grid;
}

.side-item:hover .count.has-remove {
  display: none;
}

.side-input {
  margin: 4px 12px;
  width: calc(100% - 24px);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  outline: none;
}

.side-toggle {
  position: fixed;
  left: 212px;
  bottom: 12px;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  place-items: center;
  z-index: 25;
}

.list-layout.is-collapsed .side-toggle {
  left: 12px;
  transform: rotate(180deg);
}

.list-main {
  padding: 8px 32px 140px;
  min-width: 0;
}

.list-row {
  touch-action: pan-y;
  transition: transform 180ms ease, background-color 150ms ease;
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  min-height: 56px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line);
}

.list-row:hover {
  background: rgba(0, 0, 0, 0.015);
}

.list-row.is-dragging {
  opacity: 0.4;
}

.list-thumb {
  width: 108px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #efefef center / cover no-repeat;
  display: grid;
  place-items: center;
  overflow: hidden;
}

body.dark .list-thumb {
  background-color: #1a1a1a;
}

.list-thumb img.favicon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
}

.list-row-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  color: var(--ink);
  min-width: 0;
}

.list-row-title a {
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.list-row-title a:hover {
  text-decoration: underline;
}

.list-row-host {
  color: var(--faint);
  font-size: 12px;
}

.list-row-tags {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.list-row-tags .tag-chip {
  font-size: 11.5px;
  padding: 3px 6px;
  border-radius: 3px;
}

.list-row .card-actions {
  opacity: 0;
}

.list-row:hover .card-actions,
.list-row:focus-within .card-actions {
  opacity: 1;
}

.add-row {
  margin-top: 14px;
  width: 100%;
  height: 74px;
  border-radius: 6px;
  border: 2px dashed var(--add-line);
  background: var(--add-bg);
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 26px;
  font-size: 16px;
}

.add-row:hover {
  border-color: var(--accent-text);
  color: var(--accent-text);
}

/* ---------------- Images (moodboard) ---------------- */
.moodboard {
  columns: 3;
  column-gap: 6px;
}

/* Items off screen skip their style and layout: a board can hold thousands. Each one already clips what it
   holds, so nothing gets cut. Until drawn once an item stands in at 250px; a site takes its height from
   its ratio (below) even then. */
.mood-item {
  break-inside: avoid;
  margin-bottom: 6px;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  content-visibility: auto;
  contain-intrinsic-size: auto none auto 250px;
}

.mood-item > img,
.mood-item > video {
  display: block;
  width: 100%;
  height: auto;
}

.mood-item.is-site {
  aspect-ratio: 16 / 12;
  contain-intrinsic-size: auto none auto 0px;
  background: #fff;
  box-shadow: var(--preview-shadow);
}

.mood-item.is-site .card-frame {
  width: 250%;
  height: 250%;
  transform: scale(0.4);
}

.mood-item .video-thumb {
  aspect-ratio: 16 / 9;
}

.mood-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 24px 10px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
  color: #fff;
  font-size: 12px;
  opacity: 0;
  transition: opacity 150ms ease;
  pointer-events: none;
}

.mood-overlay .grow {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mood-overlay button {
  pointer-events: auto;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
}

.mood-overlay button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.mood-item:hover .mood-overlay {
  opacity: 1;
}

.mood-empty {
  text-align: center;
  padding: 120px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

/* ---------------- Dock ---------------- */
.dock-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(10px + var(--safe-bottom));
  z-index: 40;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 16px;
}

.dock {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--dock-h);
  width: 721px;
  max-width: 100%;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--dock);
  color: var(--dock-text);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
}

.dock.is-canvas {
  width: 1052px;
}

.dock-sep {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

.dock-btn {
  position: relative;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--dock-text);
  flex-shrink: 0;
}

.dock-btn:hover {
  background: rgba(240, 240, 242, 0.05);
}

.dock-btn.is-boxed {
  height: 32px;
  min-width: 32px;
  border: 1px solid var(--dock-line);
  background: var(--dock-2);
  padding: 0 9px;
  font-size: 13px;
}

.dock-btn.is-boxed:hover {
  background: var(--dock-3);
}

.dock-btn.is-boxed.is-icon {
  padding: 0;
}

.dock-btn.is-more {
  width: 32px;
  height: 32px;
  border: 1px solid var(--dock-line);
  background: var(--dock-2);
}

.mode-wrap {
  position: relative;
  flex-shrink: 0;
}

/* One control: the current mode's colored square plus the chevron that opens the mode menu. */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 32px;
}

.mode-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--on-accent);
  flex-shrink: 0;
}

.mode-toggle:hover .mode-button {
  background: var(--accent-hover);
}

.mode-chevron {
  width: 20px;
  display: grid;
  place-items: center;
  color: var(--dock-muted);
  transition: color 150ms ease;
}

.mode-toggle:hover .mode-chevron,
.mode-toggle[aria-expanded='true'] .mode-chevron {
  color: var(--accent);
}

.dock-white-btn {
  width: 44px;
  height: 32px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  color: #111;
  flex-shrink: 0;
}

.dock-white-btn:hover {
  background: #eaeaea;
}

.dock-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 30px;
}

.dock-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--dock-muted);
  font-size: 14px;
}

.dock-tool:hover {
  color: #f7f8f8;
  background: rgba(255, 255, 255, 0.05);
}

.dock-tool.is-active {
  color: #fff;
  background: var(--dock-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.dock-tags {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.dock-tags-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.dock-tags-scroll::-webkit-scrollbar {
  display: none;
}

.dock-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13px;
  line-height: 1;
  color: var(--dock-text);
  background: rgba(255, 255, 255, 0.04);
}

.dock-tag:hover {
  color: #f7f8f8;
  background: var(--dock-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13);
}

.dock-tag.is-active {
  color: #fff;
  background: var(--dock-3);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.dock-tag.is-active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}

.dock-tags-empty {
  font-size: 13px;
  color: #9d9da3;
  padding-left: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dock-arrow {
  width: 22px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #6b6b70;
  border-radius: 6px;
  flex-shrink: 0;
}

.dock-arrow:hover {
  color: #fff;
}

/* Add website bar (replaces the dock) */
.add-bar {
  pointer-events: auto;
  width: 673px;
  max-width: 100%;
  border-radius: 12px;
  background: var(--dock);
  color: #fff;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25);
  padding: 9px 16px 10px;
}

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

.add-bar-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  margin-right: 2px;
}

.add-bar-input {
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #3a3a3d;
  background: transparent;
  color: #fff;
  font-size: 14px;
  padding: 0 11px;
  outline: none;
}

.add-bar-input:focus {
  border-color: var(--accent);
}

.add-bar-input::placeholder {
  color: #77777c;
}

.btn-accent {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

.btn-accent:hover {
  background: var(--accent-hover);
}

.btn-accent:disabled {
  opacity: 0.6;
  cursor: progress;
}

.add-bar-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #a1a1a6;
  flex-shrink: 0;
}

.add-bar-icon:hover {
  color: #fff;
}

.add-bar-icon.is-boxed {
  border: 1px solid var(--dock-line);
  background: var(--dock-2);
  color: #fff;
}

.add-bar-tags {
  align-items: flex-start;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #242427;
}

.add-bar-tags .label {
  color: #8b8b90;
  font-size: 14px;
  line-height: 32px;
}

/* Chips wrap onto lines within the bar's width; the least used wait behind "+N more" or the find box. */
.add-bar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

/* Scrolling clips at the padding edge: 4px of padding (cancelled by the margin) keeps the focus ring
   (2px outline, 2px offset) of the edge chips and the find box from being cut. */
.add-bar-chips.is-open {
  margin: -4px;
  padding: 4px;
  max-height: min(188px, 34vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #4a4a4f transparent;
}

.add-bar-chips:not(.is-open):not(.is-filtering) .is-extra,
.add-bar-chips.is-filtering .add-bar-chip:not(.is-match),
.add-bar-chips.is-filtering .chip-more {
  display: none;
}

.add-bar-chip {
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: #e9e9e9;
}

.add-bar-chip:hover {
  background: var(--dock-3);
}

.add-bar-chip.is-active {
  background: #fff;
  color: #111;
}

.chip-new {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  color: #9a9aa0;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.chip-new:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* "+N more" is a plain toggle, not a create action: solid border, brighter text. */
.chip-more {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.14);
  color: #d4d4d8;
  background: transparent;
}

.chip-more:hover {
  border-color: rgba(255, 255, 255, 0.32);
}

.chip-new-input {
  flex-shrink: 0;
  /* Fits the placeholder "Find or add a tag" (112px at 14px) with room for the caret. */
  width: 140px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 0;
  outline: none;
  background: #1e1e1e;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.add-bar-status {
  margin-top: 6px;
  font-size: 12px;
  color: #a1a1a6;
}

.add-bar-status[data-tone='error'] {
  color: #ff8a70;
}

/* ---------------- Menus ---------------- */
.menu {
  position: absolute;
  bottom: calc(100% + 8px);
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  padding: 4px;
  min-width: 188px;
  display: none;
  flex-direction: column;
  z-index: 60;
  color: var(--ink);
}

.menu.is-open {
  display: flex;
  animation: menu-in 140ms ease-out;
}

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

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
  position: relative;
}

.menu-item:hover {
  background: #f5f5f5;
}

body.dark .menu-item:hover {
  background: #242424;
}

.menu-item.is-active {
  background: var(--accent-soft);
}

.menu-item .grow {
  flex: 1;
}

.menu-item .key {
  color: var(--faint);
  font-size: 12px;
}

.menu-item .lock {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 500;
}

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

.menu-sep {
  height: 1px;
  background: #ececec;
  margin: 4px 12px;
}

body.dark .menu-sep {
  background: #2a2a2a;
}

.more-menu {
  right: 0;
  min-width: 210px;
  /* Never taller than the room above the dock; the rest scrolls. */
  max-height: calc(100dvh - var(--dock-h) - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-heading {
  padding: 8px 16px 3px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--faint);
}

.more-menu .menu-item {
  padding: 8px 18px 8px 16px;
  font-size: 13.5px;
}

.mode-menu {
  left: 0;
}

.submenu {
  position: absolute;
  left: calc(100% + 6px);
  bottom: 0;
  min-width: 220px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  padding: 6px;
  display: none;
  flex-direction: column;
}

.submenu.is-open {
  display: flex;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.toggle-row:hover {
  background: #f5f5f5;
}

body.dark .toggle-row:hover {
  background: #242424;
}

.switch {
  position: relative;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
  margin: 0;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #dcdcdf;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: background-color 180ms ease;
  pointer-events: none;
}

.switch span::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 180ms ease;
}

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

.switch input:checked + span::after {
  transform: translateX(14px);
}

.switch.is-large {
  width: 50px;
  height: 28px;
}

.switch.is-large span::after {
  width: 24px;
  height: 24px;
}

.switch.is-large input:checked + span::after {
  transform: translateX(22px);
}

/* ---------------- Modals ---------------- */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--overlay);
  animation: fade-in 160ms ease-out;
}

.modal-root.is-light {
  background: rgba(20, 20, 24, 0.42);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.modal {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: var(--modal-shadow);
  width: min(496px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 24px;
  animation: modal-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.modal h2 {
  margin: 4px 0 18px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--muted);
}

.modal-close:hover {
  background: var(--chip);
  color: var(--ink);
}

.field {
  display: block;
  margin-bottom: 18px;
}

.field > span {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 8px;
}

.input,
.textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #dcdde0;
  background: var(--surface);
  padding: 10px 13px;
  font-size: 14.5px;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.dark .input,
body.dark .textarea {
  border-color: #333;
  background: #111;
}

.input:focus,
.textarea:focus {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.3);
}

.textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.tag-select {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.tag-option {
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: #f8f8fa;
  color: #181412;
}

body.dark .tag-option {
  background: #222;
  color: #eee;
}

.tag-option:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* A chosen tag is filled with the text colour, so on and off read at a glance. */
.tag-option.is-active,
body.dark .tag-option.is-active {
  background: var(--ink);
  color: var(--surface);
  box-shadow: none;
}

.tag-option.is-new {
  border-style: dashed;
  border-color: #cfcfd4;
  background: transparent;
  color: var(--muted);
}

.modal-actions {
  display: grid;
  grid-template-columns: 40px 1fr 1.55fr;
  gap: 10px;
  align-items: center;
}

.btn {
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

.btn-outline {
  background: var(--surface);
  border: 1px solid #dcdde0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

body.dark .btn-outline {
  border-color: #333;
}

.btn-outline:hover {
  background: var(--surface-2);
}

.btn-danger-outline {
  border: 1px solid #f3c7c2;
  color: #e5484d;
  background: var(--surface);
  width: 40px;
  padding: 0;
}

.btn-danger-outline:hover {
  background: #fff5f4;
}

body.dark .btn-danger-outline:hover {
  background: #2a1616;
}

.btn-success {
  color: #fff;
  background: linear-gradient(180deg, #84d977, #5ec052);
  border: 1px solid #58b54d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn-success:hover {
  background: linear-gradient(180deg, #78d06a, #52b146);
}

.btn-primary {
  color: var(--on-accent);
  /* The solid colour under the gradient is what the hover fades from; without it the button turns see-through for a moment. */
  background: var(--accent-gradient) var(--accent);
  border: 1px solid var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-danger {
  color: #fff;
  background: #e5484d;
}

.btn-danger:hover {
  background: #d63c41;
}

.btn-block {
  width: 100%;
}

.confirm-text {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* The invite-only screen (access.js): a dialog over the library that can't be closed. */
.code-gate .modal {
  width: min(440px, 100%);
}

.code-gate .note {
  margin: 0 0 6px;
}

.code-gate .note:empty {
  display: none;
}

/* The next step under a code field (access.js): the extension on a computer's Chrome, or keeping Pinlight as an app. */
.invite-step {
  display: grid;
  justify-items: start;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.invite-step .note {
  margin: 0;
}

.invite-step .note:empty {
  display: none;
}

/* ---------------- Settings ---------------- */
.settings {
  width: min(832px, 100%);
  height: min(640px, calc(100vh - 48px));
  padding: 0;
  display: grid;
  grid-template-columns: 324px minmax(0, 1fr);
  overflow: hidden;
}

.settings-nav {
  padding: 30px 22px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.settings-nav h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.settings-sub {
  margin: 6px 0 22px;
  color: var(--muted);
  font-size: 15px;
}

.settings-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ink);
}

.settings-link:hover {
  background: var(--chip);
}

.settings-link.is-active {
  background: #f3f3f3;
}

body.dark .settings-link.is-active {
  background: #242424;
}

.settings-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.dark-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f9f9f9;
  font-size: 15px;
}

body.dark .dark-row {
  background: #1f1f1f;
}

.settings-panel {
  padding: 32px 32px 40px;
  overflow: auto;
  min-height: 0;
}

.settings-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.settings-panel .lead {
  margin: 8px 0 24px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.settings-close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 16px;
  color: var(--faint);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
}

.settings-close:hover {
  color: var(--ink);
  background: var(--chip);
}

.accordion {
  border-radius: 10px;
  background: #f5f5f5;
  margin-bottom: 12px;
}

body.dark .accordion {
  background: #1f1f1f;
}

.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  font-size: 15px;
}

.accordion summary::-webkit-details-marker {
  display: none;
}

.accordion[open] summary .i {
  transform: rotate(180deg);
}

.accordion > p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}

.shortcut {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 14px;
}

body.dark .shortcut {
  background: #1f1f1f;
}

kbd {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  min-width: 42px;
  height: 28px;
  padding: 0 8px;
  display: inline-grid;
  place-items: center;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line);
  font-size: 12px;
  color: var(--ink);
}

.section-label {
  margin: 28px 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-transform: uppercase;
}

.settings-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 28px 0;
}

.icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid;
  place-items: center;
  margin-bottom: 26px;
}

body.dark .icon-badge {
  background: var(--accent-soft);
}

.panel-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 20px;
}

.stack {
  display: grid;
  gap: 10px;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-status {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}

.plan-status strong {
  font-size: 18px;
  font-weight: 500;
}

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

.note {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.import-list {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  margin: 14px 0;
}

.import-list label {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}

.import-list label:hover {
  background: var(--chip);
}

.import-list .host {
  color: var(--faint);
  margin-left: auto;
  font-size: 12px;
}

.bookmarklet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px dashed var(--accent-text);
  color: var(--accent-text);
  text-decoration: none;
  font-size: 14px;
  background: var(--accent-soft);
}

/* ---------------- Appearance (accent color) ---------------- */
.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}

.accent-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.accent-swatch:hover {
  border-color: var(--faint);
}

.accent-swatch.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}

.accent-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--swatch);
  color: #141414;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.accent-dot-custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(from 90deg, var(--presets));
}

.accent-dot-custom input {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  opacity: 0;
  cursor: pointer;
}

.accent-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.accent-hex {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.accent-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.accent-preview-dock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: 10px;
  background: var(--dock);
}

.accent-preview .dock-tag {
  color: var(--dock-text);
}

/* ---------------- Plan picker ---------------- */
.plans-wrap {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: var(--modal-shadow);
  animation: modal-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.plans {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  padding: 36px 32px 44px;
  box-shadow: 0 1px 0 var(--line);
}

.plans-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.plans-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.billing-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--muted);
}

.billing-toggle .is-on {
  color: var(--ink);
}

.save-badge {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.plan-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 28px 26px 26px;
  background: var(--surface);
}

.plan-card.is-featured {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.25);
}

.plan-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

.green-badge {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.plan-price {
  margin: 14px 0 20px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.plan-price small {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}

.plan-price .cur {
  font-size: 18px;
  vertical-align: 5px;
  margin-right: 2px;
}

.plan-desc {
  font-size: 14.5px;
  color: var(--ink);
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 24px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: grid;
  gap: 12px;
  font-size: 14px;
}

.plan-features li {
  display: flex;
  gap: 12px;
  align-items: center;
}

.plan-features .i {
  color: var(--muted);
}

.plan-card .btn {
  margin-top: auto;
}

.plans-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 32px 20px;
  font-size: 15px;
  line-height: 1.5;
}

.plans-foot .hl {
  color: var(--accent-text);
}

/* ---------------- Design analysis / focus ---------------- */
.inspect-root {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 344px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 24px;
  background: rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(1px);
  animation: fade-in 160ms ease-out;
}

.inspect-root.is-focus {
  grid-template-columns: minmax(0, 1fr);
}

.inspect-panel {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--modal-shadow);
  padding: 30px 24px;
  overflow: auto;
  min-height: 0;
}

.inspect-panel h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.inspect-panel h3 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 400;
}

.inspect-panel .desc {
  margin: 0 0 20px;
  font-size: 13.5px;
}

.inspect-section {
  margin-bottom: 44px;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #dfe5f5;
  background: #f1f4fc;
  color: #3b4a6b;
  font-size: 15px;
}

body.dark .tech-chip {
  background: #1b2233;
  border-color: #2c3857;
  color: #b8c6e8;
}

.sub-label {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 10px;
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 12px;
  margin-bottom: 28px;
}

.swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  position: relative;
  padding-top: 10px;
}

.swatch-color {
  width: 44px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.swatch-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 999px;
  background: #555;
  color: #fff;
  white-space: nowrap;
}

.swatch-badge.is-primary {
  background: #2563eb;
}

.swatch:hover .swatch-color {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text);
}

.font-card {
  border-radius: 8px;
  background: #f4f4f4;
  border-left: 3px solid #4a8ef0;
  padding: 12px 16px;
  margin-bottom: 12px;
}

body.dark .font-card {
  background: #1f1f1f;
}

.font-card .name {
  font-size: 16px;
}

.font-card .meta {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 6px;
}

.font-more {
  font-style: italic;
  color: var(--muted);
  font-size: 13.5px;
}

.gradient-item {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.gradient-swatch {
  width: 64px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.redacted {
  position: relative;
}

.redacted .blocks {
  filter: blur(4px);
  user-select: none;
  color: var(--muted);
  letter-spacing: -1px;
  line-height: 1.8;
}

.redacted-cta {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}

.redacted-cta > div {
  background: var(--surface);
  padding: 16px 18px;
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  font-size: 13.5px;
  max-width: 260px;
}

.analysis-loading {
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(98, 101, 109, 0.3);
  border-top-color: var(--muted);
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.inspect-stage {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--modal-shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.inspect-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.seg {
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
}

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

.seg.is-active {
  background: #eaf1fd;
  border-color: #c5d8fb;
  color: #2563eb;
}

body.dark .seg.is-active {
  background: #17233d;
  border-color: #2a4170;
  color: #8fb3ff;
}

.inspect-toolbar .gap {
  width: 16px;
}

.inspect-toolbar .spacer {
  flex: 1;
}

.inspect-close {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}

.inspect-close:hover {
  background: var(--surface-2);
}

.inspect-viewport {
  --viewport-pad: 16px;
  position: relative;
  flex: 1;
  min-height: 0;
  padding: var(--viewport-pad);
  display: flex;
  justify-content: center;
  background: var(--surface);
  overflow: auto;
}

.inspect-viewport iframe {
  border: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--line);
  transition: width 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Desktop: laid out at desktop width and scaled into the room there is, like cards (--frame-scale set by inspect.js). */
.inspect-viewport:not(.is-tablet):not(.is-mobile) {
  overflow: hidden;
}

.inspect-viewport:not(.is-tablet):not(.is-mobile) iframe {
  position: absolute;
  top: var(--viewport-pad);
  left: var(--viewport-pad);
  width: calc((100% - 2 * var(--viewport-pad)) / var(--frame-scale, 1));
  height: calc((100% - 2 * var(--viewport-pad)) / var(--frame-scale, 1));
  transform: scale(var(--frame-scale, 1));
  transform-origin: 0 0;
}

.inspect-viewport.is-tablet iframe {
  width: 820px;
  flex-shrink: 0;
}

.inspect-viewport.is-mobile iframe {
  width: 390px;
  flex-shrink: 0;
}

.inspect-title {
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.inspect-title img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

/* ---------------- Onboarding ---------------- */
.coach-dim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.34);
  z-index: 70;
}

.coach-ring {
  position: fixed;
  z-index: 71;
  border-radius: 8px;
  box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / 0.95), 0 0 28px 10px rgb(var(--accent-rgb) / 0.45);
  pointer-events: none;
  transition: all 260ms ease;
}

/* First run: a short label on the live example card, which stays above the dim layer so it can be scrolled. */
.coach-try {
  position: fixed;
  /* Above the lifted card (z-index 75 in onboarding.js). */
  z-index: 76;
  padding: 6px 12px;
  border-radius: 999px;
  background: #161616;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.coach-card {
  position: fixed;
  z-index: 72;
  width: 512px;
  max-width: calc(100vw - 32px);
  padding: 22px 20px 20px;
  border-radius: 14px;
  background: #161616;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: modal-in 220ms ease-out;
}

.coach-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.coach-card p {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.coach-card .muted-line {
  color: rgba(255, 255, 255, 0.7);
  margin-top: -14px;
}

.coach-actions {
  display: flex;
  gap: 10px;
}

.coach-card .btn-primary {
  height: 42px;
  font-size: 16px;
}

.coach-ghost {
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 16px;
}

.coach-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.coach-skip {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.coach-skip:hover {
  color: #fff;
}

.coach-steps {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 10px;
}

/* ---------------- Shared small controls ---------------- */
.icon-btn {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  display: grid;
  place-items: center;
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--surface-2);
}

.icon-btn.is-danger:hover {
  color: var(--danger);
}

.btn-ghost {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted);
}

.btn-ghost:hover {
  color: var(--ink);
  background: var(--chip);
}

.link-btn {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
}

.badge-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--dock);
}

/* ---------------- Selection, drop target, swipe ---------------- */
.card.is-selected .card-preview,
.mood-item.is-selected {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-text), var(--preview-shadow);
}

.list-row.is-selected {
  background: var(--accent-soft);
}

/* Rediscover: one old bookmark at a time. */
.modal.rediscover {
  width: min(920px, 100%);
}

.rd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}

.rd-head h2 {
  margin: 0;
}

.rd-count {
  font-size: 13px;
  color: var(--muted);
}

.rd-view {
  height: auto;
  aspect-ratio: 16 / 9.5;
  border-radius: 10px;
}

.rd-meta {
  display: grid;
  gap: 2px;
  margin: 16px 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.rd-meta strong {
  font-size: 16px;
  color: var(--text);
}

.rd-note {
  margin: 6px 0 0;
  color: var(--text);
}

.rd-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.rd-tags kbd,
.rd-actions kbd {
  min-width: 0;
  height: 18px;
  margin: 0 2px 0 0;
  padding: 0 5px;
  box-shadow: none;
  font-size: 11px;
}

.rd-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.rd-actions .btn {
  gap: 6px;
}

/* A compact button for rows of items. */
.btn.btn-small {
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
}

/* Recently deleted */
.trash-list {
  display: grid;
  gap: 2px;
  max-height: min(56vh, 460px);
  margin: 0 0 16px;
  padding: 0;
  overflow: auto;
  list-style: none;
}

.trash-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.trash-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--surface-2);
}

.trash-icon img {
  width: 18px;
  height: 18px;
}

.trash-text {
  display: grid;
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.trash-text strong,
.trash-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trash-text span {
  font-size: 12px;
  color: var(--muted);
}

.trash-empty {
  padding: 18px 0;
}

/* Picked for a bulk action: a filled ring and a check in the corner. */
.card.is-picked .card-preview,
.mood-item.is-picked {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 5px var(--accent), var(--preview-shadow);
}

.card.is-picked .card-preview::after,
.mood-item.is-picked::after {
  content: '';
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.75L9 17.25M9 17.25L19.5 6.75'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.list-row.is-picked {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent-text);
}

/* The bar that takes the dock's place while bookmarks are picked. */
.bulk-bar {
  gap: 6px;
}

.bulk-count {
  padding: 0 10px 0 6px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
}

.bulk-menu-wrap {
  position: relative;
}

.bulk-menu {
  left: 0;
  max-height: min(60vh, 420px);
  overflow: auto;
  min-width: 220px;
}

.bulk-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
}

.bulk-check.is-all,
.bulk-check.is-some {
  border-color: transparent;
  background: var(--accent);
  color: var(--on-accent);
}

.menu-note {
  margin: 0;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
}

.dock-btn.is-danger:hover {
  color: #ff8a80;
}

.list-row.is-swipe-armed {
  background: #fde8e7;
}

body.dark .list-row.is-swipe-armed {
  background: #3a1715;
}

body.is-drop-ready::after {
  content: 'Drop to save';
  position: fixed;
  inset: 12px;
  z-index: 150;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 2px dashed var(--accent-text);
  background: rgb(var(--accent-rgb) / 0.14);
  backdrop-filter: blur(2px);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--accent-text);
  pointer-events: none;
}

.add-bar-paste {
  height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--dock-line);
  background: var(--dock-2);
  color: #fff;
  font-size: 14px;
}

/* ---------------- Tag suggestions and pickers ---------------- */
.suggest-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

.suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 7px;
  border: 1px dashed var(--accent-text);
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13.5px;
}

.pick-list {
  margin-top: 12px;
  max-height: min(420px, 55vh);
  overflow: auto;
  display: grid;
  gap: 2px;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 14.5px;
}

.pick-row:hover {
  background: var(--chip);
}

.pick-row .grow,
.command-item .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pick-icon,
.command-glyph {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--chip);
  color: var(--muted);
  overflow: hidden;
}

.pick-icon img,
.command-glyph img {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

/* ---------------- Command menu ---------------- */
.modal.command-menu {
  width: min(620px, 100%);
  padding: 0;
  align-self: start;
  margin-top: 12vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(560px, 76vh);
}

.command-input-row,
.command-foot {
  flex-shrink: 0;
}

.command-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  height: 58px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}

.command-input-row input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 17px;
  color: var(--ink);
}

.command-input-row input:focus-visible {
  outline: 0;
}

.command-list {
  overflow: auto;
  padding: 6px;
  min-height: 0;
}

.command-heading {
  padding: 10px 10px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
}

.command-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border-radius: 8px;
  text-align: left;
  font-size: 14.5px;
  color: var(--ink);
}

.command-item.is-active {
  background: var(--accent-soft);
}

.command-hint {
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12.5px;
  color: var(--muted);
}

.command-empty {
  padding: 28px 16px;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.command-foot {
  display: flex;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

.command-foot span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.command-foot kbd,
.command-input-row kbd {
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  font-size: 11px;
}

.modal.shortcuts-modal {
  width: min(720px, 100%);
}

.modal.shortcuts-modal .section-label:first-of-type {
  margin-top: 8px;
}

/* ---------------- Action sheet (long press / right click) ---------------- */
.modal.action-sheet {
  width: min(380px, 100%);
  padding: 20px 12px 12px;
}

.action-sheet h2 {
  margin: 0 8px 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sheet-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.sheet-tags .tag-option {
  padding: 7px 12px;
  font-size: 13.5px;
}

.sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  font-size: 15.5px;
  color: var(--ink);
  text-align: left;
}

.sheet-item:hover {
  background: var(--chip);
}

.sheet-item.is-danger {
  color: var(--danger);
}

/* ---------------- Library health ---------------- */
.modal.health-modal {
  width: min(560px, 100%);
}

.health-section {
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.health-section h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.health-group {
  display: grid;
  gap: 8px;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.health-group .btn {
  justify-self: start;
  height: 34px;
  font-size: 13.5px;
}

.health-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.health-row .grow {
  flex: 1;
  min-width: 0;
}

.health-title {
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.health-row .note {
  line-height: 1.4;
}

.health-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  background: var(--accent-soft);
  color: var(--accent-text);
}

.health-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--accent-text);
}

.health-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--chip);
  overflow: hidden;
}

.health-progress span {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 200ms ease;
}

/* ---------------- Beta features (Settings › Beta, AI suggestions) ---------------- */
.beta-badge {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Marks a suggestion that came from AI, next to the tag name. */
.ai-mark {
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid var(--accent-text);
  border-radius: 4px;
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 15px;
  letter-spacing: 0.02em;
}

/* Inside a device card or the invite-only screen, where .device-card p or .note would otherwise set the color. */
.device-card .beta-error,
.code-gate .beta-error {
  color: #b42318;
}

body.dark .device-card .beta-error,
body.dark .code-gate .beta-error {
  color: #ffb3ab;
}

.beta-facts {
  margin: 0;
}

.beta-facts summary {
  padding: 12px 16px;
  font-size: 14px;
}

.beta-facts ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 16px 14px 34px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.beta-state {
  display: grid;
  gap: 8px;
}

.beta-state:empty {
  display: none;
}

.device-card .beta-state p {
  margin: 0;
}

.beta-state .btn {
  justify-self: start;
}

.ai-why {
  margin: -4px 0 12px;
  font-size: 12.5px;
}

.modal.tag-review {
  width: min(720px, 100%);
}

/* A .pick-list with a little more room. */
.review-list {
  max-height: min(460px, 55vh);
  margin-bottom: 4px;
}

.review-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
}

.review-row:nth-child(even) {
  background: var(--chip);
}

.review-row .grow {
  display: grid;
  flex: 1;
  min-width: 0;
}

.review-title,
.review-row .grow .note {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.review-title {
  font-size: 14.5px;
}

.review-row .grow .note {
  font-size: 12.5px;
}

.review-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 55%;
}

@media (max-width: 560px) {
  .review-row {
    flex-wrap: wrap;
  }

  .review-tags {
    justify-content: flex-start;
    width: 100%;
    max-width: none;
    padding-left: 36px;
  }
}

/* ---------------- Sync & devices ---------------- */
.device-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  margin-bottom: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.device-card p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.device-card strong {
  font-size: 15px;
  font-weight: 600;
}

.device-card > .btn {
  justify-self: start;
}

.device-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-card-head > div {
  flex: 1;
  min-width: 0;
}

.device-card-head p {
  margin-top: 2px;
}

.device-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--chip);
  color: var(--muted);
}

.device-icon.is-on {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.device-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdeceb;
  color: #9a2f28;
  font-size: 13.5px;
  line-height: 1.5;
}

/* Inside a device card, where .device-card p would otherwise set the margin, colour and size; the card's gap spaces it. */
.device-card .device-error {
  margin: 0;
  color: #9a2f28;
  font-size: 13.5px;
  line-height: 1.5;
}

body.dark .device-error {
  background: #3a1715;
  color: #ffb3ab;
}

.pair-block {
  display: flex;
  align-items: center;
  gap: 18px;
}

.pair-block .btn {
  margin-top: 12px;
  height: 36px;
  font-size: 14px;
}

.qr-box {
  width: 164px;
  height: 164px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}

.qr-box svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------------- AI tools: copyable commands ---------------- */
.cmd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
}

.cmd-row code {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---------------- Share: live link and comments ---------------- */
.share-toggle {
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

[data-link-area] {
  padding-top: 14px;
}

.share-comments {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.share-comments h3 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.comment-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.comment-row .grow {
  flex: 1;
  min-width: 0;
}

.comment-row p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.comment-meta strong {
  color: var(--ink);
  font-weight: 600;
}

.card-comment {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 9px;
  flex-shrink: 0;
  border-radius: 7px;
  background: var(--chip);
  color: var(--muted);
  font-size: 12.5px;
}

.card-comment:hover {
  color: var(--ink);
  background: var(--chip-hover);
}

.comment-drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 95;
  width: min(380px, calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--modal-shadow), 0 0 0 1px var(--line);
  animation: modal-in 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.comment-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 12px 20px;
  border-bottom: 1px solid var(--line);
}

.comment-drawer-head h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.comment-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 20px;
}

.comment-form {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
}

.comment-form .textarea {
  min-height: 76px;
}

/* ---------------- Analysis export and compare ---------------- */
.export-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.export-row .seg {
  height: 32px;
  font-size: 13.5px;
}

.compare-root {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
}

.compare-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 12px 10px 18px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.compare-title {
  margin-right: 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}

.compare-sync {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
}

.compare-bar .spacer {
  flex: 1;
}

.compare-panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-height: 0;
}

.compare-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--modal-shadow);
}

.compare-pane-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px 0 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 500;
}

.compare-pane-head img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

.compare-pane-head .grow {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.compare-host {
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}

.compare-pane .inspect-viewport {
  --viewport-pad: 10px;
}

/* ---------------- Onboarding: save-first step ---------------- */
.coach-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.coach-form .input {
  height: 42px;
  min-width: 0;
  border-color: #3a3a3d;
  background: #0f0f0f;
  color: #fff;
}

.coach-actions:has(.coach-form) {
  flex-wrap: wrap;
}

.coach-actions:has(.coach-form) .coach-form {
  flex-basis: 100%;
}

/* The bookmarklet as a tip: an object that looks like it can be picked up, in the card's own colours. */
.coach-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.coach-tip p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72) !important;
}

/* The link colour is made for light backgrounds; on the dark card it stays white. */
.coach-tip .link-btn {
  color: #fff;
}

.coach-bookmarklet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #232326;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  cursor: grab;
  transition: transform 150ms ease, border-color 150ms ease;
}

.coach-bookmarklet:hover {
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.coach-bookmarklet:active {
  cursor: grabbing;
}

.coach-bookmarklet .i-grip {
  color: rgba(255, 255, 255, 0.45);
}

.coach-bookmarklet .i-bookmark {
  color: var(--accent);
}

/* ---------------- iPhone setup page ---------------- */
.setup {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px var(--page-pad) 64px;
}

.setup h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.setup-lead {
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* goodbye.html: why someone removed the extension. */
.goodbye-reasons {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.goodbye-reasons legend {
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 600;
}

.goodbye-reasons label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  font-size: 15px;
  cursor: pointer;
}

.goodbye-reasons input {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--ink);
}

.goodbye-form .field {
  margin-bottom: 14px;
}

.goodbye-thanks {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
}

.setup-step {
  display: flex;
  gap: 16px;
  padding: 20px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.setup-step > div {
  flex: 1;
  min-width: 0;
}

.setup-step h2 {
  margin: 4px 0 6px;
  font-size: 17px;
  font-weight: 600;
}

.setup-step p,
.setup-list {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.setup-list {
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.setup-num {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-display);
  font-weight: 500;
}

.setup-status {
  margin: 10px 0 0 !important;
  min-height: 1.6em;
}

.setup-status[data-tone='ok'] {
  color: var(--accent-text);
}

.setup-status[data-tone='error'] {
  color: var(--danger);
}

/* ---------------- Toast ---------------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + var(--safe-bottom));
  transform: translate(-50%, 10px);
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 10px;
  background: #1f1f21;
  color: #fff;
  font-size: 13.5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transition: opacity 180ms ease, transform 180ms ease;
  max-width: calc(100vw - 32px);
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

#toast[data-tone='error'] {
  background: #7a1f16;
}

#toast.has-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 16px;
  pointer-events: auto;
  text-align: left;
}

#toast.has-actions > span {
  margin-right: 8px;
}

.toast-action {
  height: 30px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 13.5px;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}

.toast-action:hover {
  background: rgba(255, 255, 255, 0.18);
}

.toast-action:first-of-type {
  color: var(--accent);
}

/* ---------------- Share page / small ---------------- */
.share-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--page-pad) 0;
}

/* Logo + wordmark, the same on every page. */
.brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
}

/* Lowercase on a highlighter swipe: the same stroke as the one in the logo. */
.wordmark {
  position: relative;
  padding: 0 1px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.wordmark::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -3px;
  right: -4px;
  bottom: -3px;
  height: 46%;
  border-radius: 1.5px;
  background: var(--accent);
  transform: rotate(-2deg) skewX(-16deg);
}

.logo-mark {
  width: 26px;
  height: 26px;
}

.share-title {
  margin: 28px var(--page-pad) 0;
}

.share-title h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.share-title p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.share-link-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 18px;
}

.share-link-row .input {
  font-size: 13px;
}

/* ---------------- Admin (admin.html: the operator's codes) ---------------- */
/* Korean wraps between words; a long code or setting name still breaks before it overflows. */
.setup.admin {
  max-width: 920px;
  font-size: 14px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.admin-bar {
  margin-bottom: 20px;
}

.admin-bar h1 {
  margin: 0;
}

.admin-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 600;
}

.admin .device-card h2 {
  margin: 0;
}

.admin > section {
  margin-top: 28px;
}

.admin .field small {
  display: block;
  margin-top: 6px;
}

/* Creating the password and signing in: a column of fields, not the full width of the page. */
.admin form.setup-step {
  max-width: 460px;
}

.admin .device-card .field {
  margin-bottom: 0;
}

.admin-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Server status (an .admin-list): one subject per line, the subject on the left. */
.admin-server > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  align-items: baseline;
}

.admin-server dt,
.admin-backups summary {
  color: var(--muted);
  font-size: 13.5px;
}

.admin-server dd {
  margin: 0;
  line-height: 1.55;
}

.admin-backups {
  margin-top: 8px;
}

.admin-backups summary {
  cursor: pointer;
}

.admin-backups .admin-list {
  margin-top: 8px;
}

/* New codes: the names, the days, then the button. */
.admin-new {
  display: grid;
  gap: 14px;
}

/* Three rows high, from rows="3" rather than the .textarea default. */
.admin-names,
.admin-news {
  min-height: 0;
}

.admin-new > .btn {
  justify-self: start;
}

/* One line of a small form: a label when it has one, the box, and a unit when it has one ("30 일"). */
.admin-unit,
.field > .admin-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.admin-filters {
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.admin-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* One class each for the small boxes, so the phone rule that keeps inputs at 16px still reaches them. */
.admin-search {
  width: 240px;
  padding: 7px 11px;
  font-size: 13.5px;
}

.admin-fresh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-weight: 500;
}

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

.admin-code {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.admin-code p {
  margin: 0;
}

.admin-code-head,
.admin-code-actions,
.admin-row-form,
.admin-backup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-name {
  font-size: 15px;
  font-weight: 600;
}

.admin-name.is-empty {
  color: var(--faint);
  font-weight: 500;
}

.admin-code-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
}

/* Selecting any part of a code selects all of it, ready to copy. */
.admin-code-text {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 15px;
  letter-spacing: 0.02em;
  user-select: all;
}

.admin-stop {
  color: var(--danger);
}

/* A row's small form (more days, its name) opens under its buttons. */
.admin-row-form {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* The small boxes share one size; one class each, so the phone rule that keeps inputs at 16px still reaches them. */
.admin-days,
.admin-name-input,
.admin-select {
  height: 32px;
  padding: 0 10px;
  font-size: 13.5px;
}

.admin-select {
  width: auto;
}

.admin-days {
  width: 76px;
}

.admin-name-field {
  flex: 1;
  min-width: 200px;
}

.admin-name-input {
  flex: 1;
  min-width: 0;
}

/* Active keeps the badge's own green; the other states are told apart without new colours. */
.admin-state[data-state='unused'] {
  background: var(--chip);
  color: var(--muted);
}

.admin-state[data-state='expired'] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--faint);
}

.admin-state[data-state='off'] {
  background: #fdeceb;
  color: #9a2f28;
}

/* Uninstall feedback: closed until wanted, on a card like the others. */
.admin-feedback {
  margin: 0;
  border: 1px solid var(--line);
  background: var(--surface);
}

.admin-feedback summary {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
}

.admin-feedback-body {
  padding: 0 16px 16px;
}

.admin-feedback-body .admin-code {
  border-color: transparent;
  background: var(--surface-2);
}

.admin-feedback-body > p {
  margin: 0 0 8px;
}

.admin-answer-note {
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .admin-search {
    width: 100%;
  }
  .admin-new > .btn {
    justify-self: stretch;
  }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
  .mode-three .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .moodboard {
    columns: 2;
  }
  .dock.is-canvas .dock-tool span {
    display: none;
  }
  .dock-tools {
    margin-left: 8px;
  }
}

@media (max-width: 900px) {
  .app-heading .app-total {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --bar-h: 56px;
  }
  .app-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }
  .wordmark,
  .app-search-key {
    display: none;
  }
  /* The board name stays the page heading for screen readers. */
  .app-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .plan-chip:not(.is-near) {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --page-pad: 14px;
    --preview-h: 62vh;
  }
  .library {
    margin-top: 14px;
  }
  .board-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  .board-bar::-webkit-scrollbar {
    display: none;
  }
  .board-pill {
    padding: 7px 13px;
    font-size: 13px;
  }
  .board-pill-remove {
    display: inline-grid;
  }
  .cards,
  .mode-three .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .mode-long .cards {
    --preview-h: 120vh;
  }
  .mode-mobile .cards {
    justify-content: center;
  }
  .card-actions,
  .card-open {
    opacity: 1;
  }
  .card-head {
    min-height: 50px;
    padding: 12px 8px 10px;
  }
  .card-title {
    font-size: 15px;
  }
  .card-action {
    width: 30px;
    height: 30px;
  }
  .card-tags {
    padding: 12px 12px 26px;
  }
  .moodboard {
    columns: 1;
  }
  .mood-overlay {
    opacity: 1;
  }
  /* Dock becomes a full-width bottom bar */
  .dock-wrap {
    padding: 0 8px;
    bottom: calc(8px + var(--safe-bottom));
  }
  .dock,
  .dock.is-canvas {
    width: 100%;
    gap: 6px;
    padding: 0 7px;
    height: 54px;
  }
  .dock-arrow,
  .dock-sep.is-optional,
  .dock-btn .label {
    display: none;
  }
  .dock-btn.is-boxed {
    width: 34px;
    height: 34px;
    padding: 0;
  }
  .dock-tools {
    margin-left: 0;
  }
  .dock-tool {
    padding: 0 8px;
  }
  .dock-tool span {
    display: none;
  }
  .dock-white-btn {
    width: 34px;
  }
  .add-bar {
    width: 100%;
    padding: 10px 10px 8px;
  }
  .add-bar-row.is-main {
    flex-wrap: wrap;
  }
  .add-bar-label {
    display: none;
  }
  /* The link gets a whole line; the buttons share the next one. */
  .add-bar-input {
    flex-basis: 100%;
    height: 40px;
    font-size: 16px;
  }
  .add-bar .btn-accent {
    flex: 1;
    height: 40px;
  }
  .add-bar-tags .label {
    display: none;
  }
  .menu {
    position: fixed;
    left: 8px !important;
    right: 8px !important;
    bottom: calc(70px + var(--safe-bottom));
    min-width: 0;
  }
  .menu-item {
    padding: 11px 14px;
    font-size: 15px;
  }
  .submenu {
    position: static;
    box-shadow: none;
    padding: 0 0 0 10px;
  }
  /* Modals become bottom sheets */
  .modal-root {
    padding: 0;
    align-items: end;
  }
  .modal,
  .plans-wrap {
    width: 100%;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    padding-bottom: calc(24px + var(--safe-bottom));
    animation: sheet-in 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .input,
  .textarea {
    font-size: 16px;
  }
  .settings {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    height: 92vh;
    padding-bottom: 0;
  }
  .settings-nav {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 22px 16px 12px;
  }
  .settings-sub {
    margin-bottom: 12px;
  }
  .settings-links {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .settings-link {
    width: auto;
    white-space: nowrap;
    padding: 8px 12px;
    font-size: 14px;
  }
  .settings-foot {
    margin-top: 10px;
    padding-top: 10px;
  }
  .settings-panel {
    padding: 22px 16px calc(40px + var(--safe-bottom));
  }
  .shortcut-grid {
    grid-template-columns: 1fr;
  }
  .plans {
    padding: 26px 16px 24px;
  }
  .plans-head h2 {
    font-size: 26px;
  }
  .plan-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plans-foot {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  /* Inspect stacks: preview on top, analysis as a sheet */
  .inspect-root {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr);
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px calc(8px + var(--safe-bottom));
    gap: 8px;
  }
  .inspect-root.is-focus {
    grid-template-rows: minmax(0, 1fr);
  }
  .inspect-panel {
    order: 2;
    padding: 20px 16px;
  }
  .inspect-stage {
    order: 1;
  }
  .inspect-toolbar {
    gap: 6px;
    padding: 10px;
  }
  .inspect-toolbar .gap {
    display: none;
  }
  .seg {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
  }
  .inspect-viewport {
    --viewport-pad: 8px;
  }
  .inspect-viewport.is-tablet iframe {
    width: 820px;
  }
  /* List mode: sidebar turns into a drawer */
  .list-layout,
  .list-layout.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .list-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    width: 82vw;
    max-width: 300px;
    z-index: 80;
    background: var(--surface);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    padding-top: env(safe-area-inset-top, 0px);
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform 220ms ease, visibility 0s linear 220ms;
  }
  .list-layout:not(.is-collapsed) .list-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 220ms ease;
  }
  /* Above the dock on the left: the top-right corner belongs to the app bar's settings button. */
  .side-toggle {
    top: auto;
    bottom: calc(var(--dock-h) + 28px + var(--safe-bottom));
    left: 12px !important;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transform: none !important;
  }
  .list-main {
    padding: 4px 4px 140px;
  }
  .list-row {
    grid-template-columns: 76px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 10px 4px;
  }
  .list-thumb {
    width: 76px;
    height: 44px;
  }
  .list-row .card-actions {
    opacity: 1;
  }
  .list-row .card-action:not([data-action='edit']) {
    display: none;
  }
  .coach-card {
    left: 16px !important;
    right: 16px;
    width: auto;
    top: auto !important;
    bottom: calc(80px + var(--safe-bottom));
  }
  #toast {
    bottom: calc(80px + var(--safe-bottom));
  }
  /* A message too long to sit beside its buttons takes the width and puts them below. */
  #toast.has-actions {
    flex-wrap: wrap;
    width: max-content;
  }
  .empty-state {
    padding-top: 64px;
  }
  .share-title h1 {
    font-size: 26px;
  }
  .compare-panes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .compare-bar {
    padding: 8px 8px 8px 12px;
    gap: 6px;
  }
  .compare-title {
    display: none;
  }
  .pair-block {
    flex-direction: column;
    align-items: flex-start;
  }
  .modal.command-menu {
    margin-top: 0;
    align-self: end;
    max-height: 80vh;
  }
  .command-foot {
    display: none;
  }
  .comment-drawer {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    height: 72vh;
  }
  .setup h1 {
    font-size: 26px;
  }
  .setup-step {
    padding: 16px;
    gap: 12px;
  }
  .add-bar-paste {
    height: 40px;
  }
  .modal.action-sheet {
    width: 100%;
  }
  .card-head {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}

/* Touch screens (phones, tablets): tap targets of at least 32px, most 36–40px, whatever the width. */
@media (pointer: coarse) {
  .board-pill {
    min-height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }
  /* A finger-sized target around the small ×. */
  .board-pill-remove {
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -8px -12px -8px -6px;
  }
  .size-step {
    width: 38px;
    height: 38px;
  }
  .app-search-clear {
    width: 34px;
    height: 34px;
  }
  /* Bigger hit areas without moving anything: padding out, the same margin back in. */
  .brand {
    padding: 6px;
    margin: -6px;
  }
  .list-row-title a {
    padding-block: 7px;
    margin-block: -7px;
  }
  .link-btn {
    padding-block: 4px;
    margin-block: -4px;
  }
  /* Key hints mean nothing without a keyboard. */
  button kbd,
  .popup-tag-key {
    display: none;
  }
  .add-bar-icon {
    width: 40px;
    height: 40px;
  }
  .add-bar-chip,
  .chip-new {
    height: 36px;
  }
  .dock-tag {
    height: 34px;
  }
  .card-open {
    width: 34px;
    height: 34px;
  }
  .card-action {
    width: 34px;
    height: 34px;
  }
  /* Six 34px buttons with 8px gaps left a phone card ~86px for its name ("shopify.co…"); 4px gaps give it back. */
  .card-head,
  .card-actions {
    gap: 4px;
  }
  .modal-close,
  .settings-close {
    width: 36px;
    height: 36px;
  }
  .inspect-close {
    width: 32px;
    height: 32px;
  }
  .side-item {
    min-height: 40px;
  }
  .side-heading button {
    width: 32px;
    height: 32px;
  }
}

@keyframes sheet-in {
  from {
    transform: translateY(40px);
    opacity: 0.5;
  }
}

@media (hover: none) {
  .card-actions,
  .card-open {
    opacity: 1;
  }
  /* No hover to reveal it, so the board × is always there. */
  .board-pill-remove {
    display: inline-grid;
  }
}

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