/* things{i}fw — Direction D ("Selected").
   Calm white + ink chrome; the user's saves are the hero. Pistachio marks selection and the
   active state, plum the one primary action, black label blocks name sections. One
   typeface, Mona Sans, at three widths: condensed 75 (labels), normal 100 (UI), expanded 125
   (titles and the wordmark). Floating panels get a 1.5px ink border and a hard offset
   shadow; buttons never do. */

:root {
  --ground: #ffffff;
  --surface: #ffffff;
  --raised: #ffffff;
  --ink: #0b0b0b;
  --ink-2: #5e5e5e;
  --ink-3: #9a9a9a;
  --line: #e6e6e6;
  --fill: #f2f2f2;
  --fill-hover: #e9e9e9;
  --dot: #e2e2e2;
  --pist: #b8d98a;
  --pist-ink: #7fa650;
  --pist-tint: #eef6e4;
  --pist-text: #5e8a2e;
  --pist-fill: #b8d98a33;
  --pist-wash: #b8d98a1f;
  --plum: #4a1d3f;
  --plum-hover: #5d2750;
  --on-plum: #ffffff;
  --danger: #b4232c;
  --danger-tint: #fbecec;
  --shadow-grey: #c6c6c6;
  --label-bg: #0b0b0b;
  --label-fg: #ffffff;
  --bar-bg: #0b0b0b;
  --bar-fg: #ffffff;
  --bar-line: rgba(255, 255, 255, 0.2);
  --bar-hover: rgba(255, 255, 255, 0.12);
  --bar-border: transparent;
  --active-bg: #0b0b0b;
  --active-fg: #ffffff;
  --panel-border: #0b0b0b;
  --panel-shadow: 3px 3px 0 #0b0b0b;
  --handle: #ffffff;
  --icon-bg: var(--ground);
  --veil: rgba(255, 255, 255, 0.7);
  --sheet-veil: rgba(11, 11, 11, 0.24);
  --logo-shadow: 1px 1px 0 #c6c6c6;
  --hero-shadow: 2.2px 2.2px 0 #c6c6c6;
  /* Coachmark tips: an ink bubble on light, a light one on dark. */
  --tip-bg: #0b0b0b;
  --tip-fg: #ffffff;
  --tip-muted: rgba(255, 255, 255, 0.62);
  --tip-hover: rgba(255, 255, 255, 0.14);
  --ease-snap: cubic-bezier(0.2, 0, 0, 1);
  --font: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

/* Settings → Theme can pin light or dark; "System" follows the OS. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Dark: near-ink ground with a hint of plum. Pistachio stays the selection colour; plum
   lifts so it still reads; the grey display shadow goes. Floating panels keep their hard
   offset shadow, in black. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #121012;
    --surface: #1c181b;
    --raised: #241f23;
    --ink: #f4f2f3;
    --ink-2: #a7a1a5;
    --ink-3: #7c767a;
    --line: rgba(255, 255, 255, 0.1);
    --fill: #241f23;
    --fill-hover: #2e282c;
    --dot: rgba(255, 255, 255, 0.1);
    --pist-ink: #9cc46b;
    --pist-tint: rgba(184, 217, 138, 0.13);
    --pist-text: #b8d98a;
    --pist-fill: rgba(184, 217, 138, 0.2);
    --pist-wash: rgba(184, 217, 138, 0.08);
    --plum: #6b2c5c;
    --plum-hover: #7b3769;
    --danger: #ff7b82;
    --danger-tint: rgba(255, 123, 130, 0.12);
    --label-bg: #f4f2f3;
    --label-fg: #121012;
    --bar-bg: #241f23;
    --bar-fg: #f4f2f3;
    --bar-line: rgba(255, 255, 255, 0.14);
    --bar-hover: rgba(255, 255, 255, 0.08);
    --bar-border: rgba(255, 255, 255, 0.12);
    --active-bg: #f4f2f3;
    --active-fg: #121012;
    --panel-border: rgba(255, 255, 255, 0.18);
    --panel-shadow: 3px 3px 0 #000000;
    --handle: #121012;
    --veil: rgba(18, 16, 18, 0.7);
    --sheet-veil: rgba(0, 0, 0, 0.45);
    --logo-shadow: none;
    --hero-shadow: none;
    --tip-bg: #f4f2f3;
    --tip-fg: #121012;
    --tip-muted: rgba(18, 16, 18, 0.6);
    --tip-hover: rgba(18, 16, 18, 0.08);
  }
}
/* Same, when Settings → Theme is set to Dark. */
:root[data-theme="dark"] {
    --ground: #121012;
    --surface: #1c181b;
    --raised: #241f23;
    --ink: #f4f2f3;
    --ink-2: #a7a1a5;
    --ink-3: #7c767a;
    --line: rgba(255, 255, 255, 0.1);
    --fill: #241f23;
    --fill-hover: #2e282c;
    --dot: rgba(255, 255, 255, 0.1);
    --pist-ink: #9cc46b;
    --pist-tint: rgba(184, 217, 138, 0.13);
    --pist-text: #b8d98a;
    --pist-fill: rgba(184, 217, 138, 0.2);
    --pist-wash: rgba(184, 217, 138, 0.08);
    --plum: #6b2c5c;
    --plum-hover: #7b3769;
    --danger: #ff7b82;
    --danger-tint: rgba(255, 123, 130, 0.12);
    --label-bg: #f4f2f3;
    --label-fg: #121012;
    --bar-bg: #241f23;
    --bar-fg: #f4f2f3;
    --bar-line: rgba(255, 255, 255, 0.14);
    --bar-hover: rgba(255, 255, 255, 0.08);
    --bar-border: rgba(255, 255, 255, 0.12);
    --active-bg: #f4f2f3;
    --active-fg: #121012;
    --panel-border: rgba(255, 255, 255, 0.18);
    --panel-shadow: 3px 3px 0 #000000;
    --handle: #121012;
    --veil: rgba(18, 16, 18, 0.7);
    --sheet-veil: rgba(0, 0, 0, 0.45);
    --logo-shadow: none;
    --hero-shadow: none;
    --tip-bg: #f4f2f3;
    --tip-fg: #121012;
    --tip-muted: rgba(18, 16, 18, 0.6);
    --tip-hover: rgba(18, 16, 18, 0.08);
  }

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ground);
  color: var(--ink);
  font: 400 14px/20px var(--font);
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

::placeholder {
  color: var(--ink-2);
  opacity: 1;
}

[hidden] {
  display: none !important;
}

/* The D icon set: 20×20 grid, 2px stroke, round caps and joins. Handle squares (.h) take the
   colour of whatever they sit on; dots (.f) are filled. */
svg.i {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

svg.i .h {
  fill: var(--icon-bg);
  stroke-width: 1.75;
}

svg.i .f {
  fill: currentColor;
  stroke: none;
}

/* Black label block: section names, history days, panel group headings. */
.label-block,
.frame-name,
.day {
  display: inline-flex;
  box-sizing: border-box;
  height: 22px;
  align-items: center;
  margin: 0;
  padding: 0 8px;
  background: var(--label-bg);
  color: var(--label-fg);
  font-size: 12px;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Outline count pill, beside a label block or a title. */
.count-pill,
.frame-count,
.panel-head .count {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 14px;
}

.count-pill:empty,
.frame-count:empty,
.panel-head .count:empty {
  display: none;
}

/* Keycap. */
kbd {
  display: inline-flex;
  box-sizing: border-box;
  min-width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}

/* Selection handles: four squares on the corners of a selection box, drawn as layered
   backgrounds on a pseudo-element so no extra markup is needed. Each user sets --hs (handle
   size), --hb (its border) and --ho (how far the box reaches past the element). */
.wordmark-sel::after,
.card.selected::after,
.frame.selected::after,
.tile.selected::after,
.signin-art .selected::after,
.nudge-ring::after {
  --hi: calc(var(--hs) - 2 * var(--hb));
  position: absolute;
  inset: calc(-1 * var(--ho));
  z-index: 4;
  background:
    linear-gradient(var(--handle), var(--handle)) left var(--hb) top var(--hb) / var(--hi) var(--hi) no-repeat,
    linear-gradient(var(--handle), var(--handle)) right var(--hb) top var(--hb) / var(--hi) var(--hi) no-repeat,
    linear-gradient(var(--handle), var(--handle)) left var(--hb) bottom var(--hb) / var(--hi) var(--hi) no-repeat,
    linear-gradient(var(--handle), var(--handle)) right var(--hb) bottom var(--hb) / var(--hi) var(--hi) no-repeat,
    linear-gradient(var(--pist-ink), var(--pist-ink)) left top / var(--hs) var(--hs) no-repeat,
    linear-gradient(var(--pist-ink), var(--pist-ink)) right top / var(--hs) var(--hs) no-repeat,
    linear-gradient(var(--pist-ink), var(--pist-ink)) left bottom / var(--hs) var(--hs) no-repeat,
    linear-gradient(var(--pist-ink), var(--pist-ink)) right bottom / var(--hs) var(--hs) no-repeat;
  content: "";
  pointer-events: none;
}

/* ---------- Wordmark: things{i}fw ---------- */

.wordmark {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 6px 6px;
  color: var(--ink);
  font-size: 24px;
  font-stretch: 125%;
  font-weight: 700;
  line-height: 24px;
  text-shadow: var(--logo-shadow);
  white-space: nowrap;
  cursor: default;
}

.wordmark-sel {
  --hs: 8px;
  --hb: 2px;
  --ho: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0 4px 3px;
  border: 2px solid var(--pist-ink);
  background: var(--pist-fill);
}

.wordmark-who {
  letter-spacing: 0.01em;
}

/* ---------- Canvas ---------- */

#viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.5px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#viewport.space,
#viewport.space .card {
  cursor: grab;
}

#viewport.panning,
#viewport.panning .card {
  cursor: grabbing;
}

/* --z is the zoom (set with the transform), so things in the canvas can stay a constant
   size on screen: --px is one screen pixel in canvas units. */
#world {
  --z: 1;
  --px: calc(1px / var(--z));
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

#world.moving {
  will-change: transform;
}

/* Sections have no container until you need one: a label block over the cluster, a tint
   and handles when selected, a pistachio outline when something is dropped on them. */
.frame {
  --hs: calc(8 * var(--px));
  --hb: calc(2 * var(--px));
  --ho: calc(7 * var(--px));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  box-sizing: border-box;
  border-radius: 0;
  background: transparent;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.frame.empty {
  outline: calc(1.5 * var(--px)) dashed var(--line);
  outline-offset: 0;
}

.frame.drop-target {
  background: var(--pist-wash);
  box-shadow: 0 0 0 calc(2 * var(--px)) var(--pist-ink);
}

/* Selected: a pistachio box around the cluster and its label, with handles. (app.js sizes
   an outline for this; the box is drawn here instead so it can take in the label.)
   The box keeps the same gap, 12 screen pixels, to the cards on every side and to the top
   of the label, at any zoom. The cards sit 24 canvas units in from the frame (PAD in
   app.js); the label is 30 screen pixels tall and ends where the first row starts. */
.frame.selected {
  --box-gap: calc(12 * var(--px));
  --box-side: calc(24px - var(--box-gap));
  --box-top: calc(24px - 30 * var(--px) - var(--box-gap));
  outline-style: none;
}

/* An empty section has no cards to wrap: the box is its outline. */
.frame.selected.empty {
  --box-side: 0px;
}

.frame.selected::before {
  position: absolute;
  top: var(--box-top);
  right: var(--box-side);
  bottom: var(--box-side);
  left: var(--box-side);
  border: calc(2 * var(--px)) solid var(--pist-ink);
  background: var(--pist-wash);
  content: "";
  pointer-events: none;
}

.frame.selected::after {
  inset: calc(var(--box-side) - 3 * var(--px));
  top: calc(var(--box-top) - 3 * var(--px));
}

/* Sits just above the section's first row of cards, at a constant size on screen (app.js
   scales it by 1/zoom). */
.frame-label {
  position: absolute;
  bottom: calc(100% - 24px);
  left: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 8px;
  white-space: nowrap;
  cursor: grab;
  transform-origin: 0 100%;
  z-index: 5;
}

.frame-label:active {
  cursor: grabbing;
}

.frame-label:hover .frame-name {
  background: color-mix(in srgb, var(--label-bg) 82%, var(--ground));
}

.frame-name[contenteditable] {
  min-width: 40px;
  background: var(--surface);
  color: var(--ink);
  outline: 2px solid var(--pist-ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: text;
  user-select: text;
  caret-color: var(--pist-ink);
}

.frame-label:hover .frame-name[contenteditable] {
  background: var(--surface);
}

.frame.dragging {
  background: var(--pist-wash);
}

.frame-hint {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 32px;
  place-items: center;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

.frame.empty .frame-hint {
  display: grid;
}

/* ---------- Cards ---------- */

/* --s keeps captions and buttons on cards readable when zoomed out (up to 2.2× their
   canvas size), and at their canvas size when zoomed in. */
.card {
  --s: clamp(1, 1 / var(--z), 2.2);
  --hs: calc(8 * var(--px));
  --hb: calc(2 * var(--px));
  --ho: calc(7 * var(--px));
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 240px;
  border-radius: 8px;
  background: var(--fill);
  transition: box-shadow 0.15s ease;
}

.ready #world .card {
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.15s ease;
}

.ready #world .card.instant,
.ready #world .card.dragging {
  transition: box-shadow 0.15s ease;
}

/* Hover: a white gap, then a thin ink line. */
.card:hover {
  box-shadow:
    0 0 0 calc(2 * var(--px)) var(--ground),
    0 0 0 calc(3.5 * var(--px)) var(--ink);
}

.card.free {
  z-index: 2;
}

.card.dragging {
  z-index: 3;
  box-shadow: calc(4 * var(--px)) calc(4 * var(--px)) 0 var(--ink);
  opacity: 0.96;
}

.card.selected {
  z-index: 3;
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.card.selected:hover,
.card.selected.dragging {
  box-shadow: none;
}

.card.arrived {
  animation: arrive 1.4s ease-out;
}

@keyframes arrive {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pist) 90%, transparent);
  }
  100% {
    box-shadow: 0 0 0 calc(18 * var(--px)) color-mix(in srgb, var(--pist) 0%, transparent);
  }
}

.card-media {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: var(--fill);
  pointer-events: none;
}

/* Open the original: a small round button in the corner. */
.card-open {
  position: absolute;
  top: calc(8px * var(--s, 1));
  right: calc(8px * var(--s, 1));
  z-index: 2;
  display: grid;
  width: calc(28px * var(--s, 1));
  height: calc(28px * var(--s, 1));
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.card-open svg {
  width: 58%;
  height: 58%;
}

.card-open:hover {
  background: var(--pist);
  color: #0b0b0b;
}

/* Hover caption: what it is and where it's from, in a small white box. */
.card-site {
  position: absolute;
  bottom: calc(6px * var(--s, 1));
  left: calc(6px * var(--s, 1));
  z-index: 2;
  display: grid;
  box-sizing: border-box;
  max-width: calc(100% - 12px * var(--s, 1));
  padding: calc(4px * var(--s, 1)) calc(7px * var(--s, 1)) calc(5px * var(--s, 1));
  border-radius: calc(6px * var(--s, 1));
  background: var(--surface);
  color: var(--ink-2);
  font-size: calc(9px * var(--s, 1));
  line-height: 1.25;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.card-site b,
.card-site span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-site b {
  color: var(--ink);
  font-size: calc(10px * var(--s, 1));
  font-weight: 600;
}

.card:hover .card-open,
.card:hover .card-site,
.card.selected .card-open,
.card.selected .card-site {
  opacity: 1;
}

#viewport.far .card-open,
#viewport.far .card-site {
  display: none;
}

.card-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: grid;
  width: calc(28px * var(--s, 1));
  height: calc(28px * var(--s, 1));
  place-items: center;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.7);
  color: #ffffff;
  translate: -50% -50%;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.card-play svg {
  width: 50%;
  height: 50%;
}

.card-play svg .f {
  stroke: currentColor;
  stroke-width: 2;
}

.card.playing .card-play {
  opacity: 0;
}

.card-broken {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 16px;
  border-radius: inherit;
  background: var(--fill);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

.card-broken strong {
  color: var(--ink);
  font-weight: 600;
}

/* Link cards: picture on top, title, summary and source on a grey card. */

.link-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1.91;
  border-radius: 8px 8px 0 0;
  object-fit: cover;
  background: var(--fill-hover);
  pointer-events: none;
}

.link-body {
  display: grid;
  gap: 8px;
  padding: 14px 16px 16px;
}

.link-title,
.link-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.link-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  -webkit-line-clamp: 3;
}

.link-desc {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 18px;
  -webkit-line-clamp: 3;
}

.link-foot {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.link-foot span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-icon {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  object-fit: contain;
}

/* Sites without a favicon get their initial on an ink chip. */
.letter-icon {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 4px;
  background: var(--label-bg) !important;
  color: var(--label-fg);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
}

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

.topbar {
  position: fixed;
  top: 20px;
  right: 24px;
  left: 24px;
  z-index: 10;
  display: grid;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  /* The side columns never squash; the search stays as centred as it can. */
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  pointer-events: none;
  transition:
    translate 0.28s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.2s ease,
    visibility 0s;
}

/* Scrolling down the timeline tucks the bar away; scrolling up brings it back. */
.bar-hidden .topbar {
  opacity: 0;
  translate: 0 calc(-100% - 24px);
  visibility: hidden;
  transition:
    translate 0.28s cubic-bezier(0.2, 0, 0, 1),
    opacity 0.2s ease,
    visibility 0s 0.28s;
}

.topbar > :first-child {
  justify-self: start;
}

.topbar > .bar,
.topbar-right {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  border: 1.5px solid transparent;
  border-radius: 999px;
  pointer-events: auto;
}

.topbar > .bar {
  gap: 6px;
  white-space: nowrap;
}

.topbar-right {
  justify-self: end;
  gap: 4px;
}

/* The extension's status, as a dot after the name: filled once it's connected. */
.dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 7px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    0 0 0 2.4px var(--ground),
    0 0 0 4.4px color-mix(in srgb, var(--ink) 20%, transparent);
}

.dot[data-kind="none"] {
  background: var(--ink-3);
  box-shadow:
    0 0 0 2.4px var(--ground),
    0 0 0 4.4px color-mix(in srgb, var(--ink) 12%, transparent);
}

.dot[data-kind="connecting"] {
  background: var(--ink-3);
  animation: dot-pulse 1.2s ease-in-out infinite;
}

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

.count {
  color: var(--ink-2);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sep {
  flex: none;
  width: 1px;
  height: 20px;
  background: var(--line);
}

/* Round icon buttons: top bar, panel headers. */
.icon-button,
.pill-button {
  display: grid;
  flex: none;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.icon-button:hover,
.pill-button:hover {
  background: var(--fill);
}

.pill-button.active,
.pill-button.active:hover {
  --icon-bg: var(--active-bg);
  background: var(--active-bg);
  color: var(--active-fg);
}

.icon-button:focus-visible,
.pill-button:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

/* SHARED, beside the wordmark on someone else's board. */
.board-label {
  display: inline-flex;
  box-sizing: border-box;
  height: 22px;
  align-items: center;
  padding: 0 9px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-size: 11px;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 14px;
  text-transform: uppercase;
  cursor: default;
}

.read-only .topbar .dot,
.read-only .topbar .bar .sep,
.read-only .topbar [data-action="import"],
.read-only .topbar [data-action="export"] {
  display: none;
}

/* Search: a pill with an ink outline. */
.search {
  display: flex;
  box-sizing: border-box;
  width: min(400px, 36vw);
  height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  pointer-events: auto;
  transition: box-shadow 0.15s ease;
}

.search:focus-within {
  box-shadow: 0 0 0 3px var(--pist-fill);
}

.search input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  caret-color: var(--pist-ink);
}

.search-count {
  flex: none;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.search-count:not(:empty) {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--pist);
  color: #0b0b0b;
}

.search-key {
  flex: none;
  height: 20px;
  padding: 0 8px;
}

#search:focus ~ .search-key,
#search:not(:placeholder-shown) ~ .search-key {
  display: none;
}

.card.dimmed {
  opacity: 0.14;
}

.card.dimmed:hover {
  opacity: 0.5;
}

/* In the timeline, once you scroll, the bar's groups become outlined pills so they read
   over the pictures (and import/export step aside). Browsers without scroll-driven
   animations keep the plain bar. */
@supports (animation-timeline: scroll()) {
  body {
    timeline-scope: --timeline;
  }

  .timeline {
    scroll-timeline: --timeline block;
  }

  .mode-timeline .topbar > .bar {
    animation: bar-pill linear both;
    animation-range: 0 48px;
    animation-timeline: --timeline;
  }

  /* The right pill holds round buttons, so it hugs them with the same 3px on every side:
     the active circle sits concentric with the pill's rounded ends. */
  .mode-timeline .topbar-right {
    animation: bar-pill-tight linear both;
    animation-range: 0 48px;
    animation-timeline: --timeline;
  }

  .mode-timeline .topbar > .bar :is(.sep, [data-action="import"], [data-action="export"]) {
    animation: bar-tuck linear both;
    animation-range: 0 48px;
    animation-timeline: --timeline;
  }
}

@keyframes bar-pill {
  to {
    border-color: var(--ink);
    background: var(--ground);
    padding-inline: 12px;
  }
}

@keyframes bar-pill-tight {
  to {
    border-color: var(--ink);
    background: var(--ground);
    padding: 3px;
  }
}

@keyframes bar-tuck {
  to {
    width: 0;
    margin: 0 -3px;
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- Bottom toolbar: a floating ink pill ---------- */

.toolbar {
  --icon-bg: var(--bar-bg);
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 12;
  display: flex;
  box-sizing: border-box;
  height: 48px;
  align-items: center;
  --tb-gap: 4px;
  gap: var(--tb-gap);
  padding: 6px;
  border: 1px solid var(--bar-border);
  border-radius: 999px;
  background: var(--bar-bg);
  color: var(--bar-fg);
  translate: -50% 0;
}

.toolbar button {
  display: grid;
  min-width: 36px;
  height: 36px;
  box-sizing: border-box;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--bar-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 16px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.toolbar button:hover {
  background: var(--bar-hover);
}

.toolbar button.active,
.toolbar button.active:hover {
  --icon-bg: var(--pist);
  background: var(--pist);
  color: #0b0b0b;
}

.toolbar button:focus-visible {
  outline: 2px solid var(--pist);
  outline-offset: 1px;
}

#zoom-label {
  min-width: 44px;
}

.toolbar .sep {
  margin: 0 6px;
  background: var(--bar-line);
}

/* Canvas / timeline: the current view sits on a pistachio segment, one pill that slides
   between the two. */
.modes {
  position: relative;
  display: flex;
  gap: 2px;
}

.modes::before {
  position: absolute;
  top: 0;
  left: 0;
  width: calc((100% - 2px) / 2);
  height: 100%;
  border-radius: 999px;
  background: var(--pist);
  content: "";
  pointer-events: none;
}

.ready .modes::before {
  transition: translate 220ms cubic-bezier(0.3, 1.25, 0.5, 1);
}

.mode-timeline .modes::before {
  translate: calc(100% + 2px) 0;
}

.toolbar .modes button {
  position: relative;
  min-width: 44px;
  height: 36px;
}

.ready .toolbar .modes button {
  transition:
    background-color 0.12s ease,
    color 200ms var(--ease-snap);
}

.toolbar .modes button[aria-selected="true"],
.toolbar .modes button[aria-selected="true"]:hover {
  --icon-bg: var(--pist);
  background: transparent;
  color: #0b0b0b;
}

/* Zoom and fit only make sense on the canvas. On the timeline they fold away and the pill
   narrows around what's left (it stays centred: it's translated by half its own width);
   coming back, they open out and fade in one after another. */
.toolbar .canvas-only {
  overflow: hidden;
  width: 36px;
}

.toolbar #zoom-label {
  width: 44px;
}

.toolbar .sep.canvas-only {
  width: 1px;
}

.ready .toolbar .canvas-only {
  transition:
    width 240ms var(--ease-snap),
    min-width 240ms var(--ease-snap),
    margin 240ms var(--ease-snap),
    opacity 180ms ease var(--stagger, 0ms),
    scale 220ms var(--ease-snap) var(--stagger, 0ms),
    background-color 0.12s ease,
    visibility 0s;
}

.toolbar > .canvas-only:nth-child(2) { --stagger: 16ms; }
.toolbar > .canvas-only:nth-child(3) { --stagger: 32ms; }
.toolbar > .canvas-only:nth-child(4) { --stagger: 48ms; }
.toolbar > .canvas-only:nth-child(5) { --stagger: 60ms; }

.mode-timeline .toolbar .canvas-only,
.mode-timeline .toolbar #zoom-label {
  --stagger: 0ms;
  width: 0;
  min-width: 0;
  /* Cancels the gap after it, so nothing is left behind. */
  margin: 0 calc(-1 * var(--tb-gap)) 0 0;
  opacity: 0;
  pointer-events: none;
  scale: 0.9;
  visibility: hidden;
}

.ready.mode-timeline .toolbar .canvas-only {
  transition:
    width 240ms var(--ease-snap),
    min-width 240ms var(--ease-snap),
    margin 240ms var(--ease-snap),
    opacity 120ms ease,
    scale 160ms var(--ease-snap),
    visibility 0s linear 240ms;
}

.mode-timeline #history-button {
  display: none;
}

/* ---------- Timeline ---------- */

.timeline {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  /* No top padding: sticky dates measure from inside it, so the gap under the top bar
     lives on the first row instead. */
  padding: 0 24px 140px;
  overscroll-behavior: contain;
}

/* The first day starts well clear of the top bar (about 200px under it), as in the design. */
.timeline > :first-child {
  margin-top: 264px;
}

/* Opening the timeline: each day rises up and fades in, a beat after the one above. */
.timeline.rise > * {
  animation: timeline-rise 560ms cubic-bezier(0.2, 0, 0, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

@keyframes timeline-rise {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .timeline.rise > * {
    animation: none;
  }
}

/* Date on the left, then the day's grid. */
.day-row {
  display: grid;
  column-gap: 24px;
  grid-template-columns: minmax(200px, 280px) 1fr;
  padding-bottom: 44px;
}

/* The date stays pinned under the top bar while its day scrolls past. */
.day-head {
  position: sticky;
  top: 104px;
  display: grid;
  align-self: start;
  gap: 4px;
}

/* "27 Oct 2026" on one quiet line: Medium at normal width, the year in light grey. */
.day-date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 4px;
  font-weight: inherit;
}

.day-dm {
  color: var(--ink);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 34px;
  white-space: nowrap;
}

.day-year {
  color: var(--ink-3);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 34px;
}

.day-meta {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 20px;
}

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

.day-grid {
  --row: 300px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
}

/* Keeps the last row at its natural size instead of stretching it across. */
.day-grid::after {
  flex: 1000000 1 0px;
  content: "";
}

/* Justified rows: width grows with the aspect ratio, so every tile in a row shares a
   height and no picture gets cropped. */
.tile {
  --hs: 8px;
  --hb: 2px;
  --ho: 7px;
  position: relative;
  min-width: 0;
  -webkit-user-select: none;
  user-select: none; /* double-click previews rather than selecting words */
  flex: var(--ar) 1 calc(var(--ar) * var(--row));
  border-radius: 8px;
  background: var(--fill);
  transition: box-shadow 0.15s ease;
}

.tile:hover {
  box-shadow:
    0 0 0 2px var(--ground),
    0 0 0 3.5px var(--ink);
}

.tile.selected {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.tile.selected:hover {
  box-shadow: none;
}

/* Its item is out in the preview, so the tile looks lifted off the page. */
.tile.previewing {
  visibility: hidden;
}

.tile-spacer {
  display: block;
  padding-bottom: calc(100% / var(--ar));
}

.tile-media,
.tile-broken,
.tile-text {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.tile-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.tile-broken {
  display: grid;
  place-items: end center; /* clear of a video's play badge in the middle */
  padding-bottom: 14px;
  color: var(--ink-2);
  font-size: 13px;
}

.tile-text {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--fill);
}

.tile-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}

.tile-desc {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tile-domain {
  margin-top: auto;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A link with a picture: picture on top, the text on the grey card below it. */
.tile--link .tile-media {
  bottom: auto;
  height: 58%;
  border-radius: 8px 8px 0 0;
}

.tile-caption {
  position: absolute;
  top: 58%;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px 14px;
  border-radius: 0 0 8px 8px;
  background: var(--fill);
}

.tile-caption .tile-desc {
  -webkit-line-clamp: 1;
}

.tile-caption .tile-domain {
  margin-top: 2px;
}

/* Small link tiles: less picture, just the title and the source. */
.tile--link {
  container-type: inline-size;
}

@container (max-width: 300px) {
  .tile-caption {
    top: 50%;
    gap: 2px;
    padding: 8px 10px;
  }

  .tile--link .tile-media {
    height: 50%;
  }

  .tile-caption .tile-desc,
  .tile-text .tile-desc {
    display: none;
  }

  .tile-caption .tile-title,
  .tile-text .tile-title {
    font-size: 14px;
    line-height: 18px;
  }

  .tile-text {
    padding: 12px;
  }
}

.tile-caption .tile-title {
  -webkit-line-clamp: 1;
}

.tile .card-site {
  bottom: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
  padding: 5px 10px 6px;
  font-size: 11px;
}

.tile .card-site b {
  font-size: 13px;
}

.tile:hover .card-open,
.tile:hover .card-site,
.tile.selected .card-open,
.tile.selected .card-site {
  opacity: 1;
}

.tile .card-play {
  width: 40px;
  height: 40px;
}

.tile.playing .card-play {
  opacity: 0;
}

.timeline-empty {
  max-width: 40ch;
  margin: 30vh auto 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
}

@media (max-width: 900px) {
  .day-row {
    grid-template-columns: 1fr;
    padding-bottom: 40px;
  }

  .day-head {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin-bottom: 14px;
  }

  .day-date {
    gap: 6px;
    padding-top: 0;
  }

  .day-dm,
  .day-year {
    font-size: 22px;
    line-height: 28px;
  }

  .day-grid {
    --row: 180px;
  }
}

/* Snapping guides */

.guides {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  pointer-events: none;
}

.guide {
  position: absolute;
  background: var(--pist-ink);
}

/* Marquee selection */

#marquee {
  position: fixed;
  z-index: 5;
  border: 1.5px solid var(--pist-ink);
  background: var(--pist-fill);
  pointer-events: none;
}

/* ---------- Panels and popovers: white, ink border, hard shadow ---------- */

.panel,
.popover,
.menu {
  --icon-bg: var(--surface);
  box-sizing: border-box;
  border: 1.5px solid var(--panel-border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
}

/* History */

.panel {
  position: fixed;
  top: 84px;
  right: 24px;
  bottom: 24px;
  z-index: 11;
  display: flex;
  width: 400px;
  max-width: calc(100vw - 48px);
  flex-direction: column;
  overflow: hidden;
}

/* Fades the list out under the bottom edge. */
.panel::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40px;
  background: linear-gradient(color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 85%);
  content: "";
  pointer-events: none;
}

.panel-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px 24px;
}

.panel-head h2 {
  margin: 0;
  font-size: 20px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 24px;
}

.panel-head .icon-button {
  margin-left: auto;
}

.panel-body {
  overflow-y: auto;
  padding: 4px 16px 48px;
  overscroll-behavior: contain;
}

/* A day heading in the History list. */
.day {
  display: flex;
  width: fit-content;
  margin: 28px 8px 12px;
}

.panel-body > .day:first-child {
  margin-top: 4px;
}

.entry {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
  padding: 8px 12px 8px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.entry:hover {
  background: var(--fill);
}

.entry.active,
.entry.active:hover {
  background: var(--pist-tint);
}

.entry:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: -2px;
}

.entry-thumb {
  display: grid;
  flex: none;
  width: 64px;
  height: 64px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--fill);
  object-fit: cover;
}

/* No picture: the site's initial on an ink chip. */
span.entry-thumb {
  background:
    linear-gradient(var(--label-bg), var(--label-bg)) center / 28px 28px no-repeat,
    var(--fill);
  color: var(--label-fg);
  font-size: 14px;
  font-weight: 700;
}

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

.entry-title {
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-meta {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-empty {
  padding: 24px 16px;
  color: var(--ink-2);
  text-align: center;
}

/* Popovers share the shell and the title style. */

.popover {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 11;
  width: 360px;
  padding: 18px 20px 20px;
}

.popover h2 {
  margin: 0 0 14px;
  font-size: 20px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 24px;
}

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

.popover-head h2 {
  margin: 0;
}

/* Settings: above the toolbar. */

#settings.popover {
  right: auto;
  left: 50%;
  translate: calc(-50% + 16px) 0;
}

.setting {
  display: grid;
  gap: 10px;
  padding: 16px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.popover h2 + .setting {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.setting-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.setting-note {
  display: block;
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 17px;
}

.segmented {
  display: grid;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--fill);
  grid-template-columns: repeat(4, 1fr);
}

.segmented[aria-label="Theme"] {
  grid-template-columns: repeat(3, 1fr);
}

.segmented button {
  height: 32px;
  padding: 0 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button[aria-checked="true"] {
  background: var(--pist);
  color: #0b0b0b;
}

.segmented button:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: -2px;
}

.setting-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

.setting-row > span:first-child {
  display: grid;
  flex: 1;
  gap: 4px;
}

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

.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color 0.15s ease;
}

.switch span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: translate 0.15s ease;
}

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

.switch-input:checked + .switch span {
  translate: 16px 0;
}

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

/* Keyboard shortcuts: a centred card in two columns over a white veil (the toolbar stays
   clear of it). */

#shortcuts {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(880px, calc(100vw - 48px));
  max-height: calc(100dvh - 180px);
  overflow-y: auto;
  padding: 24px 20px 28px 28px;
  box-shadow: var(--panel-shadow), 0 0 0 100vmax var(--veil);
  translate: -50% calc(-50% - 24px);
}

#shortcuts .popover-head h2 {
  font-size: 28px;
  line-height: 34px;
}

.shortcut-columns {
  display: flex;
  gap: 48px;
  padding: 24px 8px 0 0;
}

.shortcut-column {
  display: grid;
  min-width: 0;
  flex: 1;
  align-content: start;
  gap: 8px;
}

.shortcut-column dl + .label-block {
  margin-top: 16px;
}

.shortcut-column .label-block {
  justify-self: start;
}

#shortcuts dl {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr auto;
}

#shortcuts dt,
#shortcuts dd {
  display: flex;
  min-height: 40px;
  box-sizing: border-box;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

#shortcuts dt {
  padding-right: 12px;
  font-size: 14px;
}

#shortcuts dd {
  justify-content: flex-end;
  gap: 4px;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}

/* Profile */

.profile-card {
  top: 84px;
  right: 24px;
  bottom: auto;
  width: 340px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
}

.account {
  gap: 6px;
}

.account > .setting-label {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 400;
}

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

#account-email {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signin a {
  color: var(--pist-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 6px;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--pist-text);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.text-button:hover {
  text-decoration: underline;
}

.text-button:focus-visible,
.ai-apps-link:focus-visible,
.ai-apps-links a:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

/* Sign out: a real button, outlined, not a link. */
.profile-signout {
  display: inline-flex;
  flex: none;
  height: 36px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 0 14px 0 11px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.profile-signout:hover {
  background: var(--fill);
}

.profile-signout:active {
  background: var(--fill-hover);
}

.profile-signout:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

#profile:focus {
  outline: none;
}

/* Settings → AI apps: connect, see what's connected, find the guide or the tour again. */

.setting.ai-apps {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ai-apps-icon {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: var(--pist-tint);
  color: var(--ink);
}

.ai-apps-body {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 4px;
}

.ai-apps-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
}

.ai-apps-link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-apps-link svg {
  color: var(--ink-2);
}

.ai-apps-status {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 17px;
}

.ai-apps-status strong {
  color: var(--ink);
  font-weight: 500;
}

.ai-apps-dot {
  display: none;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  translate: 0 -0.5px;
}

.ai-apps-status[data-state="connected"] .ai-apps-dot,
.ai-apps-status[data-state="none"] .ai-apps-dot {
  display: block;
}

.ai-apps-status[data-state="connected"] .ai-apps-dot {
  background: var(--pist-ink);
}

.ai-apps-status[data-state="none"] .ai-apps-dot {
  box-sizing: border-box;
  border: 1.5px solid var(--ink-3);
}

.ai-apps-links {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}

.ai-apps-links a {
  border-radius: 4px;
  color: var(--pist-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 17px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-apps-links .text-button {
  gap: 4px;
  padding: 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 17px;
}

/* ---------- Setup tour: two steps, after sign-in ---------- */

.setup-tour {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  padding: 24px;
  background: var(--veil);
  place-items: center;
  animation: setup-veil 200ms ease both;
}

.setup-card {
  --icon-bg: var(--surface);
  position: relative;
  box-sizing: border-box;
  width: min(460px, 100%);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  padding: 22px 22px 18px;
  border: 1.5px solid var(--panel-border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--panel-shadow);
  color: var(--ink);
  animation: setup-in 260ms var(--ease-snap) both;
}

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

.setup-head h2 {
  margin: 0;
  font-size: 22px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.setup-lede {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 18px;
}

.setup-meter {
  display: grid;
  gap: 4px;
  margin-top: 16px;
  grid-template-columns: 1fr 1fr;
}

.setup-meter span {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--fill);
}

.setup-meter span::after {
  position: absolute;
  inset: 0;
  background: var(--pist-ink);
  content: "";
  scale: 0 1;
  transform-origin: left;
  transition: scale 360ms var(--ease-snap);
}

.setup-meter span.on::after {
  scale: 1 1;
}

.setup-steps {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.setup-step {
  display: grid;
  align-items: center;
  column-gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  transition:
    background-color 200ms ease,
    border-color 200ms ease;
}

.setup-step[data-done="true"] {
  border-color: transparent;
  background: var(--pist-wash);
}

.setup-badge {
  display: grid;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
}

.setup-badge > * {
  grid-area: 1 / 1;
}

.setup-badge svg,
.setup-step[data-done="true"] .setup-num {
  display: none;
}

.setup-step[data-done="true"] .setup-badge {
  border-color: var(--pist-ink);
  background: var(--pist);
  color: #0b0b0b;
}

.setup-step[data-done="true"] .setup-badge svg {
  display: block;
  stroke-width: 2.4;
}

.setup-step.just-done .setup-badge {
  animation: setup-pop 420ms var(--ease-snap);
}

.setup-text h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.setup-text p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 17px;
}

.setup-step[data-done="true"] .setup-text h3 {
  color: var(--ink-2);
}

.setup-step[data-done="true"] .setup-text p {
  color: var(--ink-3);
}

.setup-action {
  display: inline-flex;
  box-sizing: border-box;
  height: 34px;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.setup-action:hover {
  background: var(--fill-hover);
}

.setup-action.primary {
  border-color: var(--plum);
  background: var(--plum);
  color: var(--on-plum);
}

.setup-action.primary:hover {
  border-color: var(--plum-hover);
  background: var(--plum-hover);
}

.setup-action svg {
  margin-right: -4px;
  transition: rotate 200ms var(--ease-snap);
}

.setup-action[aria-expanded="true"] svg {
  rotate: 180deg;
}

.setup-action:focus-visible,
.setup-finish:focus-visible,
.setup-foot .text-button:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.setup-done {
  display: none;
  padding-right: 4px;
  color: var(--pist-text);
  font-size: 13px;
  font-weight: 600;
}

.setup-step[data-done="true"] .setup-action {
  display: none;
}

.setup-step[data-done="true"] .setup-done {
  display: block;
}

/* Load unpacked, until the store listing is live. */
/* Under the extension step, until it's done: what the button does. */
.setup-step-note {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 18px;
  grid-column: 2 / -1;
}

.setup-step[data-done="true"] .setup-step-note {
  display: none;
}

.setup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.setup-foot .text-button {
  padding: 6px 4px;
  color: var(--ink-2);
}

.setup-foot .text-button:hover {
  color: var(--ink);
}

.setup-finish {
  height: 40px;
  padding: 0 20px;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: var(--on-plum);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.setup-finish:hover {
  background: var(--plum-hover);
}

@keyframes setup-veil {
  from {
    opacity: 0;
  }
}

@keyframes setup-in {
  from {
    opacity: 0;
    scale: 0.98;
    translate: 0 8px;
  }
}

@keyframes setup-pop {
  0% {
    scale: 0.6;
  }
  60% {
    scale: 1.12;
  }
}

/* ---------- Nudges: a one-line tip on a real control ---------- */

.nudge {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

/* The control it's about, in a selection box with handles. */
.nudge-ring {
  --hs: 6px;
  --hb: 1.5px;
  --ho: 3px;
  position: fixed;
  box-sizing: border-box;
  border: 1.5px solid var(--pist-ink);
  background: var(--pist-fill);
  opacity: 0;
  transition: opacity 160ms ease;
}

.nudge.in .nudge-ring {
  opacity: 1;
  animation: nudge-pulse 1.8s ease-in-out 300ms infinite;
}

.nudge-bubble {
  position: fixed;
  display: flex;
  box-sizing: border-box;
  max-width: min(420px, calc(100vw - 24px));
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 14px;
  border-radius: 14px;
  background: var(--tip-bg);
  box-shadow: 3px 3px 0 var(--pist-ink);
  color: var(--tip-fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  opacity: 0;
  pointer-events: auto;
  translate: 0 6px;
  transition:
    opacity 180ms ease,
    translate 220ms var(--ease-snap);
}

.nudge-bubble[data-side="below"] {
  translate: 0 -6px;
}

.nudge.in .nudge-bubble {
  opacity: 1;
  translate: 0 0;
}

.nudge-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--tip-bg);
  rotate: 45deg;
  translate: -50% 0;
}

.nudge-bubble[data-side="above"] .nudge-arrow {
  bottom: -4px;
}

.nudge-bubble[data-side="below"] .nudge-arrow {
  top: -4px;
}

.nudge-text {
  position: relative;
  min-width: 0;
  flex: 1;
}

.nudge-action {
  position: relative;
  flex: none;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pist);
  color: #0b0b0b;
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.12s ease;
}

.nudge-action:hover {
  filter: brightness(1.06);
}

.nudge-close {
  position: relative;
  display: grid;
  flex: none;
  width: 28px;
  height: 28px;
  margin-left: -4px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tip-muted);
  cursor: pointer;
}

.nudge-close:hover {
  background: var(--tip-hover);
  color: var(--tip-fg);
}

.nudge-action:focus-visible,
.nudge-close:focus-visible {
  outline: 2px solid var(--pist);
  outline-offset: 2px;
}

@keyframes nudge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--pist) 70%, transparent);
  }
  60% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--pist) 0%, transparent);
  }
}

/* ---------- Right-click menu ---------- */

.menu {
  position: fixed;
  z-index: 20;
  min-width: 220px;
  padding: 6px;
}

.menu button {
  display: flex;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 0 8px 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.menu button > span:not(.menu-key) {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu button svg.i {
  width: 16px;
  height: 16px;
}

.menu button:hover,
.menu button:focus-visible {
  --icon-bg: var(--pist-tint);
  background: var(--pist-tint);
  color: var(--pist-text);
  outline: none;
}

.menu button:hover .menu-key {
  background: var(--surface);
  color: var(--pist-text);
}

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

.menu button.danger:hover {
  --icon-bg: var(--danger-tint);
  background: var(--danger-tint);
  color: var(--danger);
}

.menu button.danger:hover .menu-key {
  color: var(--ink);
}

.menu-key {
  display: inline-flex;
  flex: none;
  height: 20px;
  align-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}

.menu-chevron {
  flex: none;
  margin-left: auto;
  transition: rotate 0.15s ease;
}

.menu-parent[aria-expanded="true"] .menu-chevron {
  rotate: 90deg;
}

/* The Move to list: indented under its row, a fixed height you scroll. */
.menu-sub {
  max-height: 180px;
  margin: 2px 0 4px 26px;
  padding-left: 6px;
  border-left: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-sub button {
  height: 32px;
  font-size: 13px;
}

.menu hr {
  height: 1px;
  margin: 4px 10px;
  border: 0;
  background: var(--line);
}

/* ---------- Toasts ---------- */

#toasts {
  position: fixed;
  z-index: 50; /* above the preview, so copying from it still says so */
  bottom: 92px;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 8px;
  translate: -50% 0;
  pointer-events: none;
}

.toast {
  display: flex;
  max-width: min(480px, 90vw);
  box-sizing: border-box;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 1px solid var(--bar-border);
  border-radius: 999px;
  background: var(--bar-bg);
  color: var(--bar-fg);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.18s ease, translate 0.18s ease;
  translate: 0 6px;
}

.toast.show {
  opacity: 1;
  translate: 0 0;
}

.toast.error {
  border-color: transparent;
  border-radius: 14px;
  background: var(--danger);
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast.error {
    background: #8f1d24;
  }
}
/* Same, when Settings → Theme is set to Dark. */
:root[data-theme="dark"] .toast.error {
    background: #8f1d24;
  }

.toast button {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pist);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.toast.error button {
  color: #ffffff;
  text-decoration: underline;
}

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

.signed-out .topbar,
.signed-out .toolbar {
  display: none;
}

.signin {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  box-sizing: border-box;
  overflow-y: auto;
  background: var(--ground);
  color: var(--ink);
  grid-template-columns: 1fr 1fr;
}

.signin-layout {
  display: flex;
  box-sizing: border-box;
  min-height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 64px 80px 64px 88px;
}

.signin-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.signin-brand {
  margin-bottom: 56px;
  cursor: default;
}

.signin h1 {
  max-width: 560px;
  margin: 0;
  padding-left: 6px;
  font-size: 56px;
  font-stretch: 125%;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 58px;
  text-shadow: var(--hero-shadow);
}

.signin h1 span {
  display: block;
}

.signin-description {
  max-width: 460px;
  margin: 20px 0 0;
  padding-left: 6px;
  color: var(--ink-2);
  font-size: 17px;
  letter-spacing: 0.01em;
  line-height: 26px;
}

.signin-description span {
  display: block;
}

.signin-card {
  width: min(400px, 100%);
  padding: 40px 0 0 6px;
}

/* Decoration: a few saves on the dot grid, one selected. */
.signin-art {
  display: grid;
  min-height: 100%;
  place-items: center;
  overflow: hidden;
  border-left: 1px solid var(--line);
  background-image: radial-gradient(circle, var(--dot) 1.2px, transparent 1.5px);
  background-size: 24px 24px;
  background-position: 12px 12px;
}

.signin-cluster {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.signin-col {
  display: grid;
  width: 184px;
  gap: 12px;
}

.signin-col:nth-child(1) {
  padding-top: 64px;
}

.signin-col:nth-child(3) {
  padding-top: 112px;
}

.signin-art i {
  position: relative;
  display: block;
  border-radius: 8px;
  background: var(--fill);
}

.signin-col:nth-child(1) i:first-child {
  background: color-mix(in srgb, var(--pist) 30%, var(--fill));
}

.signin-col:nth-child(2) i:first-child {
  background: color-mix(in srgb, var(--plum) 10%, var(--fill));
}

.signin-col:nth-child(3) i {
  background: color-mix(in srgb, var(--ink) 7%, var(--fill));
}

.signin-art .selected {
  --hs: 8px;
  --hb: 2px;
  --ho: 7px;
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.signin-art .selected b {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  padding: 2px 6px;
  background: var(--pist);
  color: #0b0b0b;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  translate: -50% 0;
  white-space: nowrap;
}

.signin-card label {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.signin-google {
  display: flex;
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.signin-google:hover {
  background: var(--fill);
}

.signin-google:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.signin-google:disabled {
  cursor: default;
  opacity: 0.6;
}

.signin-google svg {
  flex: none;
}

.signin-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
}

.signin-or::before,
.signin-or::after {
  height: 1px;
  flex: 1;
  background: var(--line);
  content: "";
}

.signin-form {
  display: grid;
  gap: 8px;
}

.signin-form input {
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  caret-color: var(--pist-ink);
}

.signin-form input:focus {
  box-shadow: 0 0 0 2px var(--pist-ink);
}

#signin-token {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

/* The one primary action. */
.signin-form button[type="submit"] {
  min-height: 52px;
  padding: 10px 16px;
  margin-top: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: var(--on-plum);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.signin-form button[type="submit"]:hover {
  background: var(--plum-hover);
}

.signin-form button[type="submit"]:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.signin-form :disabled {
  cursor: default;
  opacity: 0.55;
}

.signin-note {
  margin: 0 0 6px;
  color: var(--ink-2);
  line-height: 20px;
}

.signin-note strong {
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.signin-problem {
  margin: 14px 0 0;
  color: var(--danger);
  font-size: 13px;
  line-height: 18px;
}

.signin-problem:empty {
  display: none;
}

.signin-info-links { display: flex; gap: 20px; margin-top: 24px; font-size: 13px; line-height: 20px; }
.signin-info-links a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.signin-info-links a:hover { color: var(--ink); }
.signin-info-links a:focus-visible { outline: 2px solid var(--pist-ink); outline-offset: 4px; }

/* ---------- Preview ---------- */

.preview {
  position: fixed;
  inset: 0;
  z-index: 40;
  color: #ffffff;
  outline: none;
}

/* Ink whatever the theme, so pictures stand out. */
.preview::before {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 11, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  content: "";
  animation: preview-in 0.24s ease both;
}

.preview-chrome {
  animation: preview-in 0.24s 0.08s ease both;
}

.preview.closing::before,
.preview.closing .preview-chrome {
  animation: preview-out 0.24s ease both;
}

.preview.closing {
  pointer-events: none;
}

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

@keyframes preview-out {
  to {
    opacity: 0;
  }
}

.preview-media {
  position: absolute;
  overflow: hidden;
  border-radius: 8px;
  transform-origin: 0 0;
  transition:
    left 0.2s ease,
    top 0.2s ease,
    width 0.2s ease,
    height 0.2s ease;
}

.preview-media.is-video,
.preview-media.is-card {
  background: #000000;
}

.preview-media > img,
.preview-media > video,
.preview-media > iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.preview-media > video {
  object-fit: contain;
}

.preview-broken {
  display: grid;
  height: 100%;
  place-items: center;
  background: #1c181b;
  color: rgba(255, 255, 255, 0.6);
}

/* A video that only plays on its own site. */
.preview-watch {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 14px;
  border-radius: 999px;
  background: #ffffff;
  color: #0b0b0b;
  font-weight: 600;
  text-decoration: none;
  translate: -50% -50%;
  white-space: nowrap;
}

.preview-watch:hover {
  background: var(--pist);
}

.preview-watch svg {
  width: 16px;
  height: 16px;
}

.preview-card {
  position: absolute;
  inset: 0;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  background: #1c181b;
}

.preview-card-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 30px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.preview-card-desc {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.preview-card-site {
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

.preview-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 80px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.preview-count {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

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

.preview-open,
.preview-close,
.preview-nav {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.preview-close:hover,
.preview-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.preview-open:focus-visible,
.preview-close:focus-visible,
.preview-nav:focus-visible,
.preview-watch:focus-visible {
  outline: 2px solid var(--pist);
  outline-offset: 2px;
}

/* Open the original: the one white pill. */
.preview-open {
  height: 40px;
  max-width: 46vw;
  gap: 8px;
  padding: 0 16px 0 14px;
  background: #ffffff;
  color: #0b0b0b;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.preview-open:hover {
  background: var(--pist);
}

.preview-open svg {
  width: 16px;
  height: 16px;
}

.preview-open span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-close {
  width: 40px;
  height: 40px;
}

.preview-nav {
  position: absolute;
  top: calc(50% - 24px);
  width: 48px;
  height: 48px;
}

.preview-prev {
  left: 24px;
}

.preview-next {
  right: 24px;
}

.preview-nav:disabled {
  visibility: hidden;
}

.preview-caption {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: min(760px, calc(100% - 32px));
  text-align: center;
  translate: -50% 0;
}

.preview-title,
.preview-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.preview-title {
  font-size: 18px;
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.preview-desc {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 20px;
}

.preview-meta {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  line-height: 18px;
}

@media (max-width: 720px) {
  .preview-nav {
    width: 40px;
    height: 40px;
    background: rgba(11, 11, 11, 0.55);
  }

  .preview-prev {
    left: 8px;
  }

  .preview-next {
    right: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .preview::before,
  .preview-chrome {
    animation-duration: 0.01s;
  }

  .preview-media {
    transition: none;
  }

  .dot[data-kind="connecting"] {
    animation: none;
  }
}

/* ---------- Sharing ---------- */

.share-card {
  top: 84px;
  bottom: auto;
  z-index: 25;
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  padding: 16px 20px 20px;
}

.share-heading {
  display: flex;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  margin: 0 -8px 12px 0;
}

#share .share-heading h2 {
  margin: 0;
}

/* Sending an invite: the back link takes the title's place. */
#share:has(#share-invite:not([hidden])) .share-heading h2 {
  visibility: hidden;
}

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

.share-form {
  display: grid;
  gap: 10px;
  margin: 0;
}

.share-picker {
  position: relative;
  display: inline-flex;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
  justify-self: start;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
}

.share-picker select {
  height: 32px;
  max-width: 280px;
  padding: 0 32px 0 14px;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.share-picker svg {
  position: absolute;
  right: 10px;
  pointer-events: none;
}

.share-picker:focus-within {
  box-shadow: 0 0 0 2px var(--pist-ink);
}

.share-picker select:focus-visible {
  outline: none;
}

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

#share .share-form input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 40px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
  caret-color: var(--pist-ink);
}

#share .share-form input:focus {
  box-shadow: 0 0 0 2px var(--pist-ink);
}

#share .share-add {
  display: flex;
  flex: none;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--active-bg);
  color: var(--active-fg);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.share-add:disabled,
.share-icon:disabled {
  opacity: 0.5;
  cursor: wait;
}

.share-access-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
}

.share-access-note strong {
  color: var(--ink);
  font-weight: 600;
}

.share-section-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 8px;
}

#share-viewing {
  margin: 0;
  padding: 0;
  border: 0;
}

#share-viewing .share-provider {
  margin-top: 16px;
}

.share-card #share-theirs .share-section-heading {
  margin: 0 0 8px;
}

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

.share-owner {
  margin-bottom: 8px;
}

.share-row {
  display: flex;
  min-height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
}

.share-avatar {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.share-owner .share-avatar {
  background: var(--label-bg);
  color: var(--label-fg);
  font-size: 10px;
}

.share-person {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.share-email {
  display: block;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-scope {
  display: block;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-owner > svg {
  margin: 0 8px;
  color: var(--ink-2);
}

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

.share-icon {
  display: inline-flex;
  flex: none;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.share-icon:hover {
  background: var(--fill);
}

.share-remove:hover {
  background: var(--danger-tint);
  color: var(--danger);
}

#share-close {
  width: 36px;
  height: 36px;
}

.share-empty {
  margin: 0 0 0 44px;
  color: var(--ink-2);
  font-size: 12px;
}

.share-link-area {
  margin-top: 20px;
}

.share-link-row {
  display: flex;
  height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding: 0 4px 0 14px;
  border-radius: 10px;
  background: var(--fill);
}

.share-link-row input {
  width: 0;
  min-width: 0;
  flex: 1;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  text-overflow: ellipsis;
  outline: none;
}

.share-link-row .share-icon {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  background: var(--ground);
}

.share-link-row .share-icon:hover {
  background: var(--pist);
  color: #0b0b0b;
}

.share-feedback {
  margin: 12px 0 0;
  color: var(--pist-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

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

.share-viewing-badge {
  padding: 2px 6px;
  background: var(--pist);
  color: #0b0b0b;
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}

.share-back {
  position: absolute;
  top: 16px;
  left: 14px;
  display: flex;
  height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 4px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.share-back:hover {
  background: var(--fill);
}

#share-invite {
  margin: 0;
  padding: 0;
  border: 0;
}

#share-invite-title {
  margin: 4px 0 8px;
  font-size: 22px;
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 28px;
}

.share-invite-to {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.share-invite-note {
  margin: 4px 0 20px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
}

.share-providers {
  display: grid;
  gap: 8px;
}

.share-provider {
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.share-provider span {
  flex: 1;
}

.share-provider:hover {
  background: var(--fill-hover);
}

#share-copy-invite {
  justify-content: center;
  margin-top: 8px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
}

#share-copy-invite span {
  flex: none;
}

#share-copy-invite:hover {
  background: var(--fill);
}

#share-invite-text {
  width: 100%;
  min-height: 160px;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

#share :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

@media (pointer: coarse) {
  #share .share-icon {
    width: 44px;
    height: 44px;
  }

  .share-row {
    min-height: 52px;
  }
}

/* Someone shared only some sections: the Inbox isn't theirs to see. */
.partial-share .frame[data-id="inbox"] {
  display: none;
}

/* Settings' file actions only show on phones, where the top bar has no room for them. */
.mobile-file-actions {
  display: none;
}

/* History beside the toolbar on narrower windows: keep clear of it. */
@media (max-width: 1100px) {
  .panel {
    bottom: 92px;
  }
}

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

@media (max-width: 760px) {
  .signin {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
    -webkit-text-size-adjust: 100%;
  }

  /* Wordmark, then the art, then the words and the form. */
  .signin-layout,
  .signin-intro {
    display: contents;
  }

  .signin-brand {
    order: 1;
    align-self: flex-start;
    margin: 8px 0 0;
    font-size: 40px;
    line-height: 40px;
  }

  .signin-brand .wordmark-sel {
    --hs: 10px;
    --ho: 6px;
    padding: 0 6px 4px;
  }

  .signin-art {
    order: 2;
    width: calc(100% + 48px);
    min-height: 0;
    padding: 28px 0 40px;
    margin: 16px 0 8px;
    border-left: 0;
  }

  .signin h1 {
    order: 3;
    align-self: stretch;
    max-width: none;
    padding: 0;
    font-size: 38px;
    line-height: 40px;
  }

  .signin-description {
    order: 4;
    align-self: stretch;
    max-width: none;
    padding: 0;
    margin-top: 14px;
    font-size: 15px;
    line-height: 22px;
  }

  .signin-card {
    order: 5;
    width: 100%;
    max-width: 420px;
    align-self: stretch;
    padding: 28px 0 0;
  }

  .signin-cluster {
    align-items: center;
    gap: 0;
  }

  .signin-col {
    width: auto;
    padding: 0 !important;
  }

  .signin-col:nth-child(1) i:last-child,
  .signin-col:nth-child(2) i:first-child {
    display: none;
  }

  .signin-col:nth-child(1) i {
    width: 104px;
    height: 80px !important;
    rotate: -6deg;
    translate: 8px 0;
  }

  .signin-col:nth-child(2) i {
    z-index: 1;
    width: 116px;
    height: 150px !important;
  }

  .signin-col:nth-child(3) i {
    width: 84px;
    height: 112px !important;
    rotate: 5deg;
    translate: -6px 4px;
  }

  .signin-google,
  .signin-form input,
  .signin-form button[type="submit"] {
    height: 48px;
    min-height: 48px;
  }

  .signin-form input {
    font-size: 16px; /* avoids Safari zooming the page on focus */
  }

  .signin-form .text-button {
    min-height: 32px;
    white-space: normal;
  }
}

/* Narrow windows: the search folds into an icon beside History, Share and Profile, and
   opens out over the bar when you tap it. */
@media (max-width: 760px) {
  .topbar {
    gap: 2px;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .search {
    position: relative;
    width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    border-color: transparent;
    background: transparent;
  }

  .search input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
  }

  .search-key,
  .search-count {
    display: none;
  }

  /* A search is on but you've tapped away: the icon stays lit, and the bar stays usable. */
  .search:has(#search:not(:placeholder-shown)) {
    background: var(--pist);
    color: #0b0b0b;
  }

  .search:focus-within {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    z-index: 6; /* over the wordmark's selection handles */
    width: auto;
    height: 44px;
    justify-content: flex-start;
    padding: 0 12px 0 14px;
    border-color: var(--ink);
    background: var(--ground);
  }

  .search:focus-within input {
    position: static;
    opacity: 1;
    cursor: text;
  }

  .search:focus-within .search-count {
    display: block;
  }

  .search:focus-within {
    background: var(--ground);
    color: var(--ink);
    box-shadow: none;
  }

}

@media (max-width: 600px) {
  /* One row: wordmark and status on the left; search, history, share and profile as icons
     on the right. */
  .topbar {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
    left: max(12px, env(safe-area-inset-left));
    gap: 2px;
  }

  .topbar > .bar {
    min-width: 0;
    gap: 2px;
  }

  .topbar .wordmark {
    padding: 6px 4px 6px 4px;
    font-size: 22px;
    line-height: 22px;
  }

  .topbar .wordmark-sel {
    --hs: 7px;
    --ho: 4.5px;
  }

  .topbar > .bar .sep,
  .topbar [data-action="import"],
  .topbar [data-action="export"],
  .topbar .count {
    display: none;
  }

  .topbar .board-label {
    height: 20px;
    padding: 0 6px;
    font-size: 10px;
  }

  .topbar-right {
    gap: 0;
  }

  .toolbar {
    bottom: max(16px, env(safe-area-inset-bottom));
    width: max-content;
    max-width: calc(100% - 24px);
    --tb-gap: 2px;
  }

  /* View switch first, as on the phone designs. */
  .toolbar .modes {
    order: -2;
  }

  .toolbar > .sep:not(.canvas-only) {
    order: -1;
  }

  .toolbar > .sep.canvas-only {
    display: none;
  }

  #zoom-label,
  .toolbar [data-action="shortcuts"] {
    display: none;
  }

  /* Panels and popovers become sheets from the bottom, over a soft veil. */
  .panel,
  .popover,
  .share-card,
  .profile-card,
  #settings.popover {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: 0;
    left: max(8px, env(safe-area-inset-left));
    z-index: 30;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - 72px - env(safe-area-inset-top));
    overflow-y: auto;
    padding-top: 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--panel-shadow), 0 0 0 100vmax var(--sheet-veil);
    translate: none;
  }

  .panel {
    top: calc(76px + env(safe-area-inset-top));
    padding: 12px 0 0;
  }

  #shortcuts {
    max-height: calc(100dvh - 72px);
  }

  .shortcut-columns {
    flex-direction: column;
    gap: 16px;
  }

  #shortcuts .popover-head h2 {
    font-size: 22px;
    line-height: 28px;
  }

  .share-back {
    top: 16px;
  }

  #share .share-form input {
    font-size: 16px;
  }

  .mobile-file-actions {
    display: grid;
  }

  .mobile-file-actions > div {
    display: flex;
    gap: 8px;
  }

  .mobile-file-actions button {
    display: inline-flex;
    flex: 1;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--ground);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  /* The right-click menu becomes an action sheet. */
  .menu {
    top: auto !important;
    right: max(8px, env(safe-area-inset-right));
    bottom: 0;
    left: max(8px, env(safe-area-inset-left)) !important;
    min-width: 0;
    padding: 56px 10px calc(16px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--panel-shadow), 0 0 0 100vmax var(--sheet-veil);
  }

  .menu button {
    height: 48px;
    gap: 14px;
    font-size: 16px;
  }

  .menu button svg.i {
    width: 20px;
    height: 20px;
  }

  .menu-key {
    display: none;
  }

  .menu-sub {
    max-height: 220px;
    margin-left: 30px;
  }

  .menu-sub button {
    height: 44px;
    font-size: 15px;
  }

  .timeline {
    padding: 0 16px calc(96px + env(safe-area-inset-bottom));
  }

  .timeline > :first-child {
    margin-top: calc(100px + env(safe-area-inset-top));
  }

  .day-row {
    padding-bottom: 32px;
  }

  .day-head {
    margin-bottom: 12px;
  }

  .day-meta {
    font-size: 13px;
  }

  .day-grid {
    --row: 150px;
  }

  .timeline-empty {
    font-size: 14px;
    line-height: 22px;
  }

  #toasts {
    bottom: calc(80px + env(safe-area-inset-bottom));
    width: calc(100% - 32px);
  }

  .toast {
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .topbar .wordmark {
    font-size: 19px;
  }

  .topbar .pill-button,
  .search {
    width: 32px;
  }

  .toolbar button,
  .toolbar .canvas-only {
    min-width: 32px;
    width: 32px;
  }

  .toolbar .modes button {
    width: auto;
    min-width: 40px;
  }
}

/* Phones: the setup tour comes up from the bottom, like the other sheets. */
@media (max-width: 760px) {
  .setup-tour {
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
    background: var(--sheet-veil);
    place-items: end stretch;
  }

  .setup-card {
    width: 100%;
    max-height: calc(100dvh - 72px - env(safe-area-inset-top));
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    animation-name: setup-up;
  }



  .setup-step {
    padding: 12px;
  }

  .setup-action,
  .setup-finish {
    height: 40px;
  }

  .setup-finish {
    flex: 1;
  }

  .nudge-bubble {
    flex-wrap: wrap;
  }
}

@keyframes setup-up {
  from {
    translate: 0 100%;
  }
}

@media (max-width: 400px) {
  /* The button moves under the words. */
  .setup-step {
    row-gap: 10px;
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .setup-step .setup-action,
  .setup-step .setup-done {
    justify-self: start;
    grid-column: 2;
  }

  .setup-step-note {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-tour,
  .setup-card,
  .setup-step.just-done .setup-badge,
  .nudge.in .nudge-ring {
    animation: none;
  }

  .setup-meter span::after,
  .setup-action svg,
  .nudge-ring,
  .nudge-bubble,
  .ready .modes::before,
  .ready .toolbar .modes button,
  .ready .toolbar .canvas-only,
  .ready.mode-timeline .toolbar .canvas-only {
    transition: none;
  }
}

/* ---------- Phones: use the whole screen in Safari ----------
   Safari (26 on) only draws the page behind its floating address bar and the status bar
   when the page itself scrolls; fixed layers get clipped to the strip between the bars,
   which leaves solid bands top and bottom. So on phones the document is the scroller:
   the canvas sits at the top of the page, as tall as the screen with the bars tucked away
   (100lvh), and the timeline scrolls the page itself. */
@media (max-width: 760px) {
  html,
  body {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  #viewport {
    position: absolute;
    inset: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
  }

  /* On the canvas the page must not scroll under your finger (it would shift the canvas
     against the controls); gestures belong to the canvas. Sheets and lists still scroll,
     since they're scroll containers of their own. */
  html:not(:has(body.mode-timeline)) {
    touch-action: none;
  }

  .timeline {
    position: relative;
    inset: auto;
    min-height: 100vh;
    min-height: 100lvh;
    overflow: visible;
  }
}

/* ---------- Asking to view, and link sharing ---------- */

/* People waiting for an answer: the one green moment in Share. */
.share-requests {
  margin-bottom: 20px;
  padding: 2px 12px 8px;
  border: 1.5px solid var(--pist-ink);
  border-radius: 12px;
  background: var(--pist-fill);
}

.share-requests .share-section-heading {
  margin-top: 10px;
}

.share-requests .share-avatar {
  border: 1.5px solid var(--ink);
  background: var(--ground);
}

.share-requests .share-scope {
  color: var(--ink);
  opacity: 0.75;
}

.share-requests .share-row-actions {
  align-items: center;
  gap: 4px;
}

.share-approve {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--label-bg);
  color: var(--label-fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.share-approve:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.share-approve:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Share button: a dot while someone is asking to view. */
#share-button {
  position: relative;
}

#share-button.has-requests::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
  border: 1.5px solid var(--ground);
  border-radius: 50%;
  background: var(--pist-ink);
  content: "";
}

.share-link-area {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.share-link-area .share-section-heading {
  margin-top: 0;
}

.share-access-row {
  margin-bottom: 10px;
}

.share-access-icon .globe,
.share-access-row.public .share-access-icon .lock {
  display: none;
}

.share-access-row.public .share-access-icon .globe {
  display: block;
}

.share-access-row.public .share-access-icon {
  border: 1.5px solid var(--ink);
  background: var(--pist);
  color: #0b0b0b;
}

.share-access-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  max-width: 100%;
  border-radius: 6px;
}

.share-access-picker select {
  max-width: 100%;
  padding: 0 22px 0 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  cursor: pointer;
}

.share-access-picker svg {
  position: absolute;
  right: 0;
  pointer-events: none;
}

.share-access-picker:focus-within {
  box-shadow: 0 0 0 2px var(--pist-ink);
}

.share-access-picker select:focus-visible {
  outline: none;
}

.share-access-picker select:disabled {
  cursor: progress;
  opacity: 0.6;
}

.share-copy {
  display: inline-flex;
  flex: none;
  height: 36px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.share-copy:hover {
  background: var(--pist);
  color: #0b0b0b;
}

.share-copy:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

/* ---------- A board opened from its public link ---------- */

.public-view .topbar-right > .pill-button {
  display: none;
}

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

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

.public-signin,
.public-own {
  display: inline-flex;
  height: 40px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.public-signin {
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  background: var(--ground);
  color: var(--ink);
}

.public-signin:hover {
  background: var(--fill);
}

.public-own {
  padding: 0 18px 0 14px;
  background: var(--plum);
  color: var(--on-plum);
}

.public-own:hover {
  background: var(--plum-hover);
}

.public-short {
  display: none;
}

.public-signin:focus-visible,
.public-own:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

/* ---------- Private board: ask to view ---------- */

.request-card {
  display: grid;
  gap: 12px;
}

.request-send {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--plum);
  color: var(--on-plum);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.request-send:hover {
  background: var(--plum-hover);
}

.request-send:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.request-send:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Sent: the button turns into a quiet confirmation. */
.request-send.sent,
.request-send.sent:hover {
  border: 1.5px solid var(--pist-ink);
  background: var(--pist-fill);
  color: var(--ink);
  opacity: 1;
}

.signin a.request-home {
  box-sizing: border-box;
  color: var(--ink);
  text-decoration: none;
}

.request-card .share-access-note {
  margin: 4px 0 0;
}

.request-card .text-button {
  padding: 0 2px;
  font-size: 12px;
}

.request-art {
  position: relative;
}

.request-art .signin-cluster {
  filter: blur(18px);
  opacity: 0.55;
}

.request-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding: 0 18px 0 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
  box-shadow: 3px 3px 0 var(--ink);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  translate: -50% -50%;
}

@media (max-width: 760px) {
  .request-send,
  .signin a.request-home {
    min-height: 48px;
    height: 48px;
  }

  /* {they} is wider than {i}. */
  .request-access .signin-brand {
    font-size: 32px;
    line-height: 32px;
  }
}

@media (max-width: 600px) {
  .public-own {
    height: 36px;
    font-size: 13px;
  }

  /* One short action on phones; both lead to the sign-in screen anyway. */
  .public-signin,
  .public-own .i,
  .public-long {
    display: none;
  }

  .public-short {
    display: inline;
  }

  .public-own {
    padding: 0 14px;
  }
}

/* ---------- Setup pill, and the card it opens ---------- */

/* Tool setup, kept apart from the profile button: "Finish setup 1/2" with a ring that
   fills a half per step (setup.js). Ink on light and light on dark, so its accent flips
   with it. */
:root {
  --pill-accent: #b8d98a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pill-accent: #5e8a2e;
  }
}

:root[data-theme="dark"] {
  --pill-accent: #5e8a2e;
}

.setup-pill {
  display: inline-flex;
  flex: none;
  box-sizing: border-box;
  height: 36px;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 6px;
  margin-right: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--active-bg);
  color: var(--active-fg);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

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

.setup-pill:hover,
.setup-pill.active {
  background: color-mix(in srgb, var(--active-bg) 84%, var(--ground));
}

.setup-pill:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.setup-pill-label {
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.setup-pill-count {
  color: var(--pill-accent);
  font-size: 12px;
  font-stretch: 75%;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 16px;
}

.setup-ring {
  flex: none;
  fill: none;
  rotate: -90deg;
  stroke-width: 3;
}

.setup-ring-track {
  stroke: color-mix(in srgb, var(--active-fg) 22%, transparent);
}

.setup-ring-fill {
  stroke: var(--pill-accent);
  stroke-dasharray: 0 100;
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s var(--ease-snap);
}

/* The card: title, a two-part meter, and the two steps as a checklist. */
#setup-card.popover {
  top: 84px;
  bottom: auto;
  width: 320px;
  max-width: calc(100vw - 24px);
  padding: 0;
  overflow: hidden;
}

.setup-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 10px 10px 16px;
}

#setup-card h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 20px;
}

.setup-card-close {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.setup-card-close:hover {
  background: var(--fill);
}

.setup-card-meter {
  display: flex;
  gap: 4px;
  padding: 0 16px 12px;
}

.setup-card-meter span {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  transition: background-color 0.3s ease;
}

.setup-card-meter span.on {
  background: var(--pist-ink);
}

.setup-card-rows {
  padding: 0 0 6px;
  margin: 0;
  list-style: none;
}

.setup-card-row {
  display: grid;
  align-items: center;
  column-gap: 10px;
  padding: 8px 16px;
  grid-template-columns: 22px minmax(0, 1fr) auto;
}

.setup-card-row:last-child {
  padding-bottom: 12px;
}

.setup-card-badge {
  display: grid;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
}

.setup-card-badge svg {
  display: none;
  stroke-width: 2.5;
}

.setup-card-row[data-state="done"] .setup-card-badge {
  border-color: var(--pist-ink);
  background: var(--pist-ink);
  color: var(--surface);
}

.setup-card-row[data-state="done"] .setup-card-badge span {
  display: none;
}

.setup-card-row[data-state="done"] .setup-card-badge svg {
  display: block;
}

.setup-card-row:is([data-state="checking"], [data-state="skipped"]) .setup-card-badge {
  border-style: dashed;
  border-color: var(--ink-3);
  color: var(--ink-3);
}

.setup-card-row[data-state="problem"] .setup-card-badge {
  border-color: var(--danger);
  color: var(--danger);
}

.setup-card-text {
  display: grid;
  min-width: 0;
  justify-items: start;
}

.setup-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.setup-card-row:is([data-state="done"], [data-state="skipped"]) .setup-card-title {
  color: var(--ink-2);
  font-weight: 400;
}

.setup-card-row[data-state="done"] .setup-card-title {
  text-decoration: line-through;
}

.setup-card-note {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
}

.setup-card-row[data-state="problem"] .setup-card-note {
  color: var(--danger);
}

.setup-card-skip {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer;
}

.setup-card-skip:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.setup-card-skip[hidden],
.setup-card-note[hidden],
.setup-card-action[hidden] {
  display: none;
}

.setup-card-action {
  display: inline-flex;
  box-sizing: border-box;
  height: 28px;
  align-items: center;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
}

.setup-card-action:hover {
  background: var(--fill);
}

.setup-card-action.primary {
  border-color: var(--plum);
  background: var(--plum);
  color: var(--on-plum);
}

.setup-card-action.primary:hover {
  border-color: var(--plum-hover);
  background: var(--plum-hover);
}

:is(.setup-card-action, .setup-card-skip, .setup-card-close):focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .setup-pill {
    gap: 6px;
    padding-right: 12px;
    margin-right: 4px;
  }

  .setup-pill-label {
    display: none;
  }
}

/* Phones: a sheet from the bottom, like the other popovers. */
@media (max-width: 600px) {
  #setup-card.popover {
    top: auto;
    bottom: 0;
    width: auto;
    max-width: none;
    padding: 22px 0 env(safe-area-inset-bottom);
  }
}

@media (prefers-reduced-motion: reduce) {
  .setup-ring-fill,
  .setup-card-meter span {
    transition: none;
  }
}

/* "Start here" (start.js): four poster cards where the Inbox will be, and the day you
   joined in the timeline. They're buttons: a click does the step. */
.start-card,
.tile--start {
  padding: 0;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.start-card {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--fill);
  box-shadow: 0 0 0 calc(1 * var(--px)) var(--line);
  transition: box-shadow 0.15s ease, translate 0.2s var(--ease-snap);
}

.start-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.start-card:hover,
.start-card:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 calc(2 * var(--px)) var(--ground),
    0 0 0 calc(3.5 * var(--px)) var(--ink);
  translate: 0 calc(-3 * var(--px));
}

.tile--start { display: block; text-align: left; }
.tile--start:focus-visible { outline: 2px solid var(--pist-ink); outline-offset: 2px; }

/* The posters stand in for the empty Inbox and the timeline's empty line. */
.board-empty .frame[data-id="inbox"] {
  visibility: hidden;
}

.board-empty .timeline-empty {
  display: none;
}


/* ---------- Share, in levels ---------- */

/* The title row: back on the deeper levels, the level's name (or a section's tag), close. */
.share-heading {
  gap: 4px;
}

.share-heading h2 {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
}

.share-level-back {
  width: 36px;
  height: 36px;
  margin-left: -10px;
}

.share-title-chip {
  font-size: 14px;
  line-height: 18px;
}

#share-main {
  display: grid;
  gap: 14px;
}

#share-main[hidden] {
  display: none;
}

#share-main > .share-feedback {
  margin: 0;
}

/* Who can see it: two options, the chosen one in selection green. */
.share-choices {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.share-choices-label {
  margin-bottom: 8px;
  padding: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 18px;
}

.share-option {
  display: block;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--ground);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.share-option:hover {
  border-color: var(--ink-3);
}

.share-option.on {
  border-color: var(--pist-ink);
  background: var(--pist-fill);
}

.share-option-row {
  display: flex;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 6px 8px;
}

.share-option-text {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.share-option input {
  display: grid;
  flex: none;
  width: 20px;
  height: 20px;
  place-items: center;
  margin: 0;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--ground);
  cursor: pointer;
}

.share-option input:checked {
  border: 2px solid var(--ink);
}

.share-option input:checked::after {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  content: "";
}

.share-option input:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.share-option:has(input:disabled) {
  cursor: default;
  opacity: 0.6;
}

.share-option:has(input:disabled) input {
  cursor: default;
}

.share-lead {
  display: grid;
  flex: none;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink);
}

.share-option.on .share-lead {
  border: 1.5px solid var(--ink);
  background: var(--ground);
}

.share-choices .share-access-note {
  margin: 2px 0 0;
}

/* The public link, and copying it. */
.share-link-row {
  height: 48px;
  padding: 0 4px 0 14px;
  border-radius: 12px;
}

.share-link-row .share-copy {
  height: 40px;
  padding: 0 16px;
  border-color: var(--active-bg);
  background: var(--active-bg);
  color: var(--active-fg);
  font-size: 14px;
}

.share-link-row .share-copy:hover {
  border-color: var(--active-bg);
  background: var(--active-bg);
  color: var(--active-fg);
  opacity: 0.88;
}

/* Someone asking to view, on the main level. */
.share-request {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border: 1.5px solid var(--pist-ink);
  border-radius: 12px;
  background: var(--pist-fill);
}

.share-request-text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The rows that lead one level down. */
.share-nav {
  display: grid;
  margin: 0 -8px;
}

.share-nav-row {
  display: flex;
  min-height: 52px;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.share-nav-row:hover {
  background: var(--fill);
}

.share-nav-row:focus-visible,
.share-section-row:focus-visible,
.share-scope-button:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: -2px;
}

.share-nav-row .share-lead {
  width: 28px;
  height: 28px;
  background: transparent;
}

.share-nav-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
}

.share-nav-detail {
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.share-avatars {
  display: flex;
  flex: none;
}

.share-avatars .share-avatar {
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid var(--surface);
  font-size: 11px;
}

.share-avatars .share-avatar + .share-avatar {
  margin-left: -8px;
}

.share-avatar.mine {
  background: var(--label-bg);
  color: var(--label-fg);
}

/* People with access: one row each, with what they can see. */
.share-people {
  gap: 0;
}

.share-people > li {
  border-top: 1px solid var(--line);
}

.share-people > li:first-child {
  border-top: 0;
}

.share-people .share-owner {
  margin: 0;
}

.share-role {
  flex: none;
  color: var(--ink-2);
  font-size: 13px;
}

.share-scope-button {
  display: inline-flex;
  flex: none;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.share-scope-button:hover {
  background: var(--fill-hover);
}

.share-scope-button.open {
  background: var(--active-bg);
  color: var(--active-fg);
}

.share-person-open {
  padding-bottom: 12px;
}

.share-access-menu {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1.5px solid var(--panel-border);
  border-radius: 14px;
  background: var(--raised);
  box-shadow: var(--panel-shadow);
}

.share-access-menu .share-option-row {
  min-height: 44px;
  padding-left: 12px;
}

.share-access-menu .share-option-text {
  font-size: 14px;
  font-weight: 500;
}

.share-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 12px;
}

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

.share-chip {
  display: inline-flex;
  height: 26px;
  align-items: center;
  gap: 2px;
  padding: 0 2px 0 8px;
  background: var(--label-bg);
  color: var(--label-fg);
  font-size: 12px;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.share-chip .share-icon {
  width: 22px;
  height: 22px;
  color: inherit;
}

.share-chip .share-icon:hover {
  background: rgba(255, 255, 255, 0.18);
}

.share-chip .share-icon svg {
  width: 12px;
  height: 12px;
}

.share-chip-add {
  position: relative;
  display: inline-flex;
  height: 26px;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1.5px dashed var(--ink);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.share-chip-add svg {
  width: 12px;
  height: 12px;
}

/* The native picker sits invisibly on top, so it opens the system list on phones. */
.share-chip-add select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
}

.share-chip-add:focus-within {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.share-remove-access {
  display: flex;
  height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 6px 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.share-remove-access:hover {
  color: var(--danger);
}

/* Share a section: search, then any number of rows. */
.share-search {
  display: flex;
  height: 44px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--fill);
  color: var(--ink-2);
}

.share-search:focus-within {
  box-shadow: 0 0 0 2px var(--pist-ink);
}

.share-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: none;
}

.share-sections {
  gap: 0;
  max-height: min(420px, 52dvh);
  margin: 0 -8px;
  overflow-y: auto;
}

.share-sections > li + li {
  border-top: 1px solid var(--line);
}

.share-section-row {
  display: flex;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.share-section-row:hover {
  background: var(--fill);
}

.share-section-row .label-block {
  overflow: hidden;
  max-width: 60%;
  text-overflow: ellipsis;
}

.share-section-count {
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.share-spacer {
  flex: 1;
}

.share-section-people {
  gap: 0;
  margin-top: -4px;
}

.share-section-people > li {
  border-top: 1px solid var(--line);
}

/* ---------- Access marks: a section's tag on the canvas, and its row in Share ---------- */

.access-mark {
  display: inline-flex;
  flex: none;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  line-height: 14px;
}

.access-private {
  color: var(--ink-3);
}

.access-people {
  height: 22px;
  padding: 0 7px 0 6px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

/* The loudest mark, because it's the one that matters. */
.access-public {
  height: 22px;
  padding: 0 8px 0 6px;
  border-radius: 999px;
  background: var(--label-bg);
  color: var(--label-fg);
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.frame-access {
  margin-left: 2px;
  padding: 0;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.frame-access.access-private {
  width: 22px;
  height: 22px;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
}

.frame-access.access-people {
  padding: 0 7px 0 6px;
  background: var(--ground);
  font-size: 11px;
  font-weight: 600;
}

.frame-access.access-public {
  padding: 0 8px 0 6px;
  border: 0;
  font-size: 11px;
  font-stretch: 75%;
  font-weight: 700;
}

.frame-access[hidden] {
  display: none;
}

.frame-access:hover {
  filter: none;
}

.frame-access.access-private:hover,
.frame-access.access-people:hover {
  background: var(--fill);
  color: var(--ink);
}

.frame-access:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

/* ---------- The board pill: MY BOARD, SHARED or PUBLIC, beside {i} ---------- */

.board-pill {
  position: relative;
  display: inline-flex;
  flex: none;
  height: 32px;
  box-sizing: border-box;
  align-items: center;
  gap: 2px;
  margin-left: 6px;
  padding: 0 6px 0 10px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-stretch: 75%;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.board-pill[hidden] {
  display: none;
}

.board-pill:hover {
  background: var(--fill);
}

.board-pill.open,
.board-pill.open:hover {
  background: var(--active-bg);
  color: var(--active-fg);
  border-color: var(--active-bg);
}

.board-pill.open svg {
  rotate: 180deg;
}

.board-pill:disabled {
  padding-right: 10px;
  cursor: default;
}

.board-pill:disabled:hover {
  background: var(--ground);
}

.board-pill:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

/* Something new shared with you. */
.board-pill.has-new::after {
  position: absolute;
  top: -4px;
  right: -3px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--ground);
  border-radius: 50%;
  background: var(--plum);
  content: "";
}

/* The boards you can open. */
.boards-card {
  top: 84px;
  bottom: auto;
  left: 24px;
  right: auto;
  z-index: 25;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 108px);
  overflow-y: auto;
  padding: 10px;
}

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

.boards-row {
  display: flex;
  min-height: 56px;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 10px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}

.boards-row:hover {
  background: var(--fill);
}

.boards-row.current {
  border-color: var(--pist-ink);
  background: var(--pist-fill);
}

.boards-row:focus-visible {
  outline: 2px solid var(--pist-ink);
  outline-offset: 2px;
}

.boards-words {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.boards-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boards-detail {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boards-new {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--plum);
}

.boards-logo {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 8px;
  background: var(--label-bg);
  color: var(--pist);
  font-size: 13px;
  font-stretch: 125%;
  font-weight: 700;
}

.boards-row .share-avatar {
  width: 36px;
  height: 36px;
}

.boards-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 4px;
}

.boards-empty {
  padding: 10px 12px 12px;
  color: var(--ink-2);
  font-size: 13px;
}

@media (max-width: 760px) {
  .boards-card {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: 0;
    left: max(8px, env(safe-area-inset-left));
    width: auto;
    padding: 12px 10px calc(16px + env(safe-area-inset-bottom));
  }

  .share-sections {
    max-height: none;
  }

  .share-level-back {
    margin-left: -8px;
  }

  #share .share-search input {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  /* Just {i}: the pill takes the room the words had. */
  .topbar .wordmark-word {
    display: none;
  }

  .topbar .wordmark {
    padding: 6px 4px 6px 6px;
  }

  .board-pill {
    height: 30px;
    margin-left: 8px;
    font-size: 13px;
  }
}


/* ---------- Closing sheets: the × ---------- */

/* Only where the boards list and the menu are bottom sheets. */
.sheet-only,
.menu .menu-close {
  display: none;
}

@media (max-width: 760px) {
  .sheet-only {
    display: flex;
  }

  .boards-card .popover-head {
    padding: 0 0 6px 10px;
  }

  .boards-card .popover-head h2 {
    margin: 0;
  }

  .menu .menu-close {
    position: absolute;
    top: 10px;
    right: 10px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border-radius: 999px;
  }

  .menu .menu-close:hover,
  .menu .menu-close:focus-visible {
    background: var(--fill);
  }
}