/* Copied from newtab.css in the repo root by tools/build.mjs. Don't edit it here. */

:root {
  --column-width: 240px;
  --column-gap: 26px;
  /* Menus and panels, light or dark with the appearance
     setting, which follows the system unless set. */
  color-scheme: light dark;
  --surface: light-dark(#fff, #2c2c2e);
  --ink: light-dark(#2b2b2b, #f5f5f7);
  --ink-muted: light-dark(#777, #98989d);
  --fill: light-dark(#efefef, #3a3a3c);
  --fill-strong: light-dark(#e4e4e4, #48484a);
  --line: light-dark(#e2e2e2, #3a3a3c);
  --line-strong: light-dark(#c4c4c4, #636366);
  --switch-on: light-dark(#2b2b2b, #30d158);
  --selection: light-dark(#007aff, #0a84ff);
  /* Liquid glass, shared by columns, buttons, menus and panels. */
  --glass-radius: 38px;
  --glass-rim:
    inset 0 1px 0.5px rgb(255 255 255 / 0.32),
    inset 0 -1px 1px rgb(255 255 255 / 0.1),
    inset 0 0 18px rgb(255 255 255 / 0.05);
  --glass-shadow: 0 12px 36px rgb(10 25 60 / 0.16), 0 2px 6px rgb(10 25 60 / 0.08);
  --glass-shade: light-dark(rgb(0 0 0 / 0.06), rgb(0 0 0 / 0.28));
  --glass-surface: light-dark(rgb(255 255 255 / 0.66), rgb(40 42 48 / 0.62));
  --glass-surface-solid: light-dark(rgb(255 255 255 / 0.84), rgb(40 42 48 / 0.86));
  --glass-button: light-dark(rgb(255 255 255 / 0.32), rgb(255 255 255 / 0.1));
  --glass-button-hover: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.18));
  --glass-button-on: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.3));
}

:root[data-scheme="light"] {
  color-scheme: light;
}

:root[data-scheme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: var(--bg, light-dark(#6e6e6e, #2a2a2c));
}

html[data-tone] {
  --bg: var(--color);
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--fg);
  font: 500 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#board {
  display: flex;
  gap: var(--column-gap);
  flex: 1;
  min-height: 0;
  padding: 40px 24px clamp(24px, 4vh, 48px);
  overflow: auto hidden;
  scrollbar-width: none;
}

/* Tints: each column is glass in one of these, mostly neutrals, and each a
   shade deeper in dark mode. */

[data-theme="black"] { --tint: light-dark(#0b0b0c, #000); }
[data-theme="ink"] { --tint: light-dark(#1c1e23, #0e0f12); }
[data-theme="charcoal"] { --tint: light-dark(#2b2d32, #1a1b1f); }
[data-theme="graphite"] { --tint: light-dark(#3b3e45, #26282d); }
[data-theme="ash"] { --tint: light-dark(#5b5f67, #383b41); }
[data-theme="slate"] { --tint: light-dark(#475365, #2a313d); }
[data-theme="steel"] { --tint: light-dark(#3d5874, #283b4f); }
[data-theme="silver"] { --tint: light-dark(#7d838d, #4b4f57); }
[data-theme="stone"] { --tint: light-dark(#6a645b, #3b3833); }
[data-theme="mocha"] { --tint: light-dark(#5c4636, #3a2c22); }
[data-theme="olive"] { --tint: light-dark(#585a34, #393a22); }
[data-theme="forest"] { --tint: light-dark(#2c5a45, #1e3d30); }
[data-theme="teal"] { --tint: light-dark(#1f5f66, #153f44); }
[data-theme="navy"] { --tint: light-dark(#1e3577, #15244f); }
[data-theme="cobalt"] { --tint: light-dark(#2a3de0, #1f2da6); }
[data-theme="plum"] { --tint: light-dark(#5a3a6c, #3e284b); }
[data-theme="wine"] { --tint: light-dark(#6e2639, #4a1a27); }
[data-theme="rust"] { --tint: light-dark(#a94c26, #7a361b); }

[data-theme] {
  --bg: linear-gradient(165deg, color-mix(in srgb, var(--tint) 82%, #fff), var(--tint));
  --fg: #fff;
  --muted: rgb(255 255 255 / 0.7);
  --hover: rgb(255 255 255 / 0.16);
  --folder-fill: color-mix(in srgb, var(--tint) 55%, #fff);
  --folder-stroke: #fff;
}

/* Wallpapers: one picture, turned through the hues. Text on it is dark in
   light mode and light in dark mode, where the picture is dimmed. */
[data-wallpaper] {
  --bg: var(--wallpaper-image) center / cover;
  --fg: light-dark(#14213f, #fff);
  --muted: light-dark(rgb(20 33 63 / 0.6), rgb(255 255 255 / 0.62));
  --hover: light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.12));
  --folder-fill: light-dark(#fff, rgb(255 255 255 / 0.4));
  --folder-stroke: light-dark(#14213f, #fff);
}

[data-wallpaper="glass-violet"] { --wallpaper-hue: 40deg; }
[data-wallpaper="glass-mint"] { --wallpaper-hue: -70deg; }
[data-wallpaper="glass-mono"] { --wallpaper-filter: grayscale(1); }

html[data-wallpaper] {
  background: light-dark(#efeeea, #050505);
}

html[data-wallpaper] body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: var(--bg);
  filter: hue-rotate(var(--wallpaper-hue, 0deg)) var(--wallpaper-filter,);
  pointer-events: none;
  content: "";
}

:root {
  --wallpaper-image: url("wallpapers/glass-light.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    --wallpaper-image: url("wallpapers/glass-dark.svg");
  }
}

:root[data-scheme="dark"] {
  --wallpaper-image: url("wallpapers/glass-dark.svg");
}

.swatch[data-wallpaper] {
  filter: hue-rotate(var(--wallpaper-hue, 0deg)) var(--wallpaper-filter,);
}

[data-tone] {
  --tint: var(--color);
  --bg: linear-gradient(
    165deg,
    oklch(from var(--color) calc(l + 0.035) c calc(h - 18)),
    oklch(from var(--color) calc(l - 0.035) c calc(h + 18))
  );
}

[data-tone="dark"] {
  --fg: #fff;
  --muted: rgb(255 255 255 / 0.6);
  --hover: rgb(255 255 255 / 0.12);
  --folder-fill: color-mix(in srgb, var(--color) 70%, #fff);
  --folder-stroke: #fff;
}

[data-tone="light"] {
  --fg: color-mix(in srgb, var(--color) 15%, #000);
  --muted: color-mix(in srgb, var(--fg) 62%, transparent);
  --hover: color-mix(in srgb, var(--fg) 9%, transparent);
  --folder-fill: color-mix(in srgb, var(--color) 50%, #fff);
  --folder-stroke: color-mix(in srgb, var(--color) 45%, #000);
}

/* Column */

.column {
  position: relative;
  display: flex;
  flex: 0 0 var(--column-width);
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  border-radius: var(--glass-radius);
  color: var(--fg);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
  transition:
    translate 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 200ms ease;
}

/* Liquid glass: the page behind is blurred, brightened and bent at the edges,
   then lightly tinted, with light catching the rim. The glass is its own
   layer so the content stays crisp. */
.column::before,
.group-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(165deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 40%),
    linear-gradient(color-mix(in srgb, var(--tint, #3b3e45) var(--glass-tint, 60%), transparent) 0 0),
    linear-gradient(var(--glass-shade) 0 0);
  box-shadow: var(--glass-rim);
  backdrop-filter: blur(18px) saturate(180%) var(--refract,);
  content: "";
}

/* A thin rim that catches color at its corners, as glass does. */
.column:not(.bare)::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from 210deg,
    rgb(255 255 255 / 0.36),
    rgb(255 255 255 / 0.06) 18%,
    rgb(160 210 255 / 0.18) 30%,
    rgb(255 255 255 / 0.05) 45%,
    rgb(255 255 255 / 0.26) 55%,
    rgb(255 170 220 / 0.16) 68%,
    rgb(255 255 255 / 0.05) 82%,
    rgb(255 255 255 / 0.36)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}

.column.bare {
  box-shadow: none;
}

.column.bare::before {
  display: none;
}

/* Under the pointer, a column rises a little and leans toward it; over the
   empty part of its heading, it's ready to be dragged. */
.column.leaning {
  z-index: 2;
  scale: 1.008;
  transform: translate(var(--lean-x, 0), var(--lean-y, 0));
}

.column.grabbable .head {
  cursor: grab;
}

/* Dragging a heading shouldn't select its title. */
.column .head {
  user-select: none;
}

.column .head .rename-input {
  user-select: text;
}

.column.lifted {
  z-index: 3;
  box-shadow: 0 24px 60px rgb(10 25 60 / 0.3);
  scale: 1.02;
  transition:
    scale 160ms ease,
    box-shadow 160ms ease;
}

.sorting-columns,
.sorting-columns * {
  cursor: grabbing !important;
}

/* Open Tabs, Reading List and Notes stand a little apart from the bookmarks. */
.column.side {
  margin-right: 14px;
  overflow: hidden;
  transition:
    flex-basis 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-right 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 220ms ease;
}

/* Content keeps its full width while the column narrows, so it slides out of
   view instead of reflowing. */
.column.side > * {
  min-width: var(--column-width);
}

.column.side.collapsed {
  flex-basis: 0;
  margin-right: calc(var(--column-gap) * -1);
  opacity: 0;
}

/* Round buttons on the left that open the side columns; they mirror the + after
   the last column and stack when there's more than one. */
.side-toggles {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  align-self: flex-start;
  width: 44px;
  margin-top: max(var(--stack-half, 0px), calc(50vh - var(--board-top, 0px)));
  translate: 0 -50%;
}

.side-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-button);
  color: var(--fg);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
}

.side-toggle {
  transition:
    background-color 160ms ease,
    opacity 200ms ease,
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* The round buttons lift and lean toward the pointer like the pills. */
.side-toggle.leaning,
.corner-gear.leaning,
.fullscreen-toggle.leaning {
  scale: 1.06;
  transform: translate(var(--lean-x, 0), var(--lean-y, 0));
}

.side-toggle.dimmed.leaning {
  scale: 0.85;
}

/* While one side column is open, the other buttons step back. */
.side-toggle.dimmed {
  opacity: 0.5;
  scale: 0.8;
}

.side-toggle.dimmed:hover {
  opacity: 0.85;
}

.side-toggle:hover {
  background: var(--glass-button-hover);
}

.side-toggle[aria-pressed="true"] {
  background: var(--glass-button-on);
}

.side-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.side-toggle .solid {
  fill: currentColor;
  stroke: none;
}

@media (prefers-reduced-motion: reduce) {
  .column,
  .column.side,
  .side-toggles,
  .side-toggle {
    transition: none;
  }
}

.dragging {
  opacity: 0.5;
}

.head {
  position: relative;
  display: flex;
  flex: none;
  gap: 8px;
  align-items: center;
  height: 54px;
  padding: 0 12px 0 22px;
  color: var(--muted);
  font-weight: 600;
}

.head-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  font-size: 15px;
}

.head-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.head-icon .solid {
  fill: currentColor;
  stroke: none;
}

.head-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg);
}

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

.head-actions {
  display: flex;
  flex: none;
  gap: 4px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.column:hover .head-actions,
.column:focus-within .head-actions,
.column:has(.picker) .head-actions,
.column.lifted .head-actions {
  opacity: 1;
}

.list {
  flex: 1;
  min-height: 0;
  padding: 6px 10px 16px;
  /* Room to scroll the last rows out from under the floating buttons. */
  scroll-padding-bottom: 68px;
  overflow-y: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
}

/* Tab group cards */

/* Sized like a tab row, as Chrome draws groups among its tabs. */
.group-card {
  position: relative;
  margin-bottom: 6px;
  border-radius: 22px;
  color: var(--fg);
  box-shadow: none;
  isolation: isolate;
}

/* Every group is the same faint, light card in the column's own colors; its
   Chrome color shows only as a dot before the name. */
.group-card {
  --fg: inherit;
  --muted: inherit;
  --hover: inherit;
  --folder-fill: inherit;
  --folder-stroke: inherit;
}

.group-card:not(.loose)::before {
  background: var(--group-fill, light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.13)));
  backdrop-filter: none;
}

/* Centered in an icon-wide slot, so group names line up with tab titles. */
.group-emoji {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  font-size: 15px;
  line-height: 1;
  text-shadow: none;
}

.group-dot {
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4.5px;
  border-radius: 50%;
  /* Chrome's colors at one lightness, so no dot shouts over the others. */
  background: oklch(from var(--color) 0.68 calc(c * 0.9) h);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color) 18%, transparent);
}

/* A window's ungrouped tabs sit straight on the page, like any list. */
.group-card.loose {
  box-shadow: none;
}

.group-card.loose::before {
  display: none;
}

.group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 40px;
  /* Matches a tab row's inset inside the loose card. */
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

.group-head:hover {
  background: var(--hover);
}

.group-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Count and chevron share one right-aligned slot; on hover the chevron, down
   to unfold and up to fold, takes the count's place. */
.group-end {
  display: grid;
  flex: none;
  place-items: center end;
  min-width: 16px;
}

.group-end > * {
  grid-area: 1 / 1;
  transition: opacity 120ms ease;
}

.group-chevron {
  display: grid;
  place-items: center;
  width: 16px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 120ms ease, rotate 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

:is(.group-head, .window-head):is(:hover, :focus-visible) .group-chevron {
  opacity: 1;
}

:is(.group-head, .window-head):is(:hover, :focus-visible) .group-count {
  opacity: 0;
}

[aria-expanded="true"] > .group-end .group-chevron {
  rotate: 180deg;
}

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

.group-tabs-inner {
  padding: 0 6px 8px;
}

.group-card.loose .group-tabs-inner {
  padding: 0;
}

/* Open tabs: the one you're on is highlighted, and any can be closed from the
   × that shows on hover. */
.row.current {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
  font-weight: 600;
}

/* In the side panel, a bookmark with an open tab has a dot at its right
   edge, like the extension's own. */
.open-dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 4px 0 auto;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

/* Two tabs in Chrome's Split View share a row, half each, with a thin line
   between them. */
.split-pair {
  position: relative;
  display: flex;
  border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}

.split-pair > .row {
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
}

.split-pair > .row:first-child {
  border-radius: 16px 6px 6px 16px;
}

.split-pair > .row:last-child {
  border-radius: 6px 16px 16px 6px;
}

.split-pair::after {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: color-mix(in srgb, var(--fg) 18%, transparent);
  content: "";
  pointer-events: none;
}

/* Tabs picked with Cmd-click, and bookmarks with Shift-click, for the menu or
   dragging to act on together. */
[data-id].picked,
[data-id].picked.browser-folder.selected,
:is(.row, .pinned-tile).selected,
.panel :is(.row, .pinned-tile).selected.current {
  background: color-mix(in srgb, var(--selection) 28%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

[data-id].picked:hover,
:is(.row, .pinned-tile).selected:hover {
  background: color-mix(in srgb, var(--selection) 34%, transparent);
}

.row.closing {
  opacity: 0;
  scale: 0.97;
  transition: opacity 160ms ease, scale 160ms ease;
}

.tab-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  opacity: 0;
  transition: opacity 120ms ease;
}

.row:hover .tab-close,
.tab-close:focus-visible {
  opacity: 1;
}

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

.tab-close svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.7;
}

/* Windows in Open Tabs: a quiet heading over the window's groups and tabs. */

.window-section + .window-section {
  margin-top: 18px;
}

.window-head {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
  transition: color 120ms ease;
}

.window-head:hover {
  color: var(--fg);
}

.window-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-head.editing {
  padding: 0 14px;
}

.window-tabs {
  padding-top: 2px;
}

/* Rows */

.row {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 8px 0 calc(8px + var(--depth, 0) * 14px);
  border: 0;
  border-radius: 16px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: default;
}

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

/* Dividers and headers sit among the rows without acting like links. */
.row.divider-row {
  height: 17px;
}

.row.divider-row::before {
  position: absolute;
  top: 50%;
  right: 12px;
  left: calc(12px + var(--depth, 0) * 14px);
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  pointer-events: none;
  content: "";
}

.row.header-row {
  height: 30px;
  align-items: flex-end;
  padding-bottom: 4px;
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.row.header-row .row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A subfolder's description, on a second line within the same row height. */
.row-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.row-description {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.78em;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-text .description-input,
.row-text .description-input:focus-visible {
  flex: none;
  height: 18px;
  font-size: 0.78em;
}

:is(.divider-row, .header-row):hover {
  background: none;
}

.row.header-row.editing {
  text-transform: none;
  letter-spacing: normal;
}

/* Where a drop will land: a short rounded bar in the gap between items, or a
   soft ring around a folder or group taking it in. */
.row,
.pill,
.pinned-tile {
  position: relative;
}

:is(.row, .group-card).drop-before::after,
:is(.row, .group-card).drop-after::after,
:is(.pill, .pinned-tile).drop-before::after,
:is(.pill, .pinned-tile).drop-after::after {
  position: absolute;
  border-radius: 2px;
  background: var(--fg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--fg) 40%, transparent);
  pointer-events: none;
  content: "";
}

:is(.row, .group-card).drop-before::after,
:is(.row, .group-card).drop-after::after {
  right: 14px;
  left: 14px;
  height: 2.5px;
}

:is(.row, .group-card).drop-before::after {
  top: -2px;
}

.row.drop-after::after {
  bottom: -1.5px;
}

.group-card.drop-after::after {
  bottom: -4.5px;
}

:is(.pill, .pinned-tile).drop-before::after,
:is(.pill, .pinned-tile).drop-after::after {
  top: 10px;
  bottom: 10px;
  width: 2.5px;
}

.pill.drop-before::after {
  left: -6px;
}

.pill.drop-after::after {
  right: -6.5px;
}

.pinned-tile.drop-before::after {
  left: -4.5px;
}

.pinned-tile.drop-after::after {
  right: -4.5px;
}

.row.drop-into,
.head.drop-into,
.group-card.drop-into {
  background: var(--hover);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 55%, transparent);
}

.list.drop-end::after {
  display: block;
  height: 2.5px;
  margin: 0 14px;
  border-radius: 2px;
  background: var(--fg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--fg) 40%, transparent);
  content: "";
}

.row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.favicon {
  padding: 1px;
  border-radius: 4px;
}

.folder .row-title {
  font-weight: 700;
}

/* One solid shape in the border's color, so folders stay quiet. */
.folder .row-icon {
  fill: var(--folder-stroke);
  stroke: var(--folder-stroke);
  stroke-linejoin: round;
  stroke-width: 1.4;
}

/* A little see-through, the shape only; an emoji on it stays solid. */
.folder svg.row-icon {
  opacity: 0.4;
}

/* A folder's emoji sits on the folder's body. */
.folder-emoji {
  position: relative;
  display: grid;
  width: 22px;
  height: 22px;
  margin: -2px;
}

.folder .folder-emoji > svg {
  width: 100%;
  height: 100%;
}

.folder-emoji-mark {
  position: absolute;
  top: 57%;
  left: 50%;
  font-size: 11px;
  line-height: 1;
  translate: -50% -50%;
}

.empty {
  padding: 10px 8px;
  padding-left: calc(8px + var(--depth, 0) * 14px);
  color: var(--muted);
}

/* Controls */

.control {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
  cursor: default;
}

.control:hover {
  background: var(--hover);
  color: var(--fg);
}

.control svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.control .solid {
  fill: currentColor;
  stroke: none;
}


/* Add bookmark */

/* Adding is offered once the pointer is over the column, floating over the
   end of the list, which scrolls on underneath. */
/* The side columns' footers (Show All Downloads, adding to the Reading
   List). The pieces fade rather than the footer, since a fading parent would
   stop their glass from seeing the rows behind. */
.side-footer > *,
.side-footer::before {
  opacity: 0;
  transition: opacity 160ms ease;
}

.side-footer > * {
  pointer-events: auto;
}

/* Rows passing under the buttons dim a little, so the buttons stay legible. */
.column:has(> .side-footer) > .list {
  padding-bottom: 72px;
  mask-image: linear-gradient(#000 calc(100% - 64px), rgb(0 0 0 / 0.45) calc(100% - 20px), transparent);
}

:is(.column:hover, .column:has(:focus-visible)) .side-footer > *,
:is(.column:hover, .column:has(:focus-visible)) .side-footer::before,
.side-footer:has(form) > * {
  opacity: 1;
}

/* Add bookmark dialog, tinted like the column it opened from. */

.bookmark-dialog {
  width: min(340px, 100vw - 32px);
  padding: 0;
  border: 0;
  border-radius: var(--glass-radius);
  background: linear-gradient(165deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0) 40%), color-mix(in srgb, var(--tint, #3b3e45) 80%, transparent);
  color: var(--fg);
  box-shadow: var(--glass-rim), 0 24px 60px rgb(10 25 60 / 0.35);
  backdrop-filter: blur(30px) saturate(180%);
}

.bookmark-dialog::backdrop {
  background: rgb(0 0 0 / 0.25);
}

.add-form {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.add-form h2 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
}

.add-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.add-form input,
.add-form select,
.add-form textarea {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  outline: none;
  background: var(--hover);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.add-form input:focus-visible,
.add-form select:focus-visible,
.add-form textarea:focus-visible {
  box-shadow: inset 0 0 0 1.5px var(--muted);
}

.add-form :is(input, textarea)::placeholder {
  color: var(--muted);
}

.add-form .select {
  position: relative;
  display: grid;
}

.add-form select {
  padding-right: 30px;
  appearance: none;
}

.add-form select option {
  background: var(--surface);
  color: var(--ink);
}

.add-form .select svg {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
}

.add-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 4px;
}

.add-actions button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

.add-actions button:hover {
  color: var(--fg);
}

.add-actions button[type="submit"] {
  background: var(--fg);
  /* Black or white, whichever the button's own color isn't. */
  color: oklch(from var(--fg) round(1 - l) 0 0);
}

.add-actions button[type="submit"]:hover {
  opacity: 0.9;
}

/* Renaming */

/* One quiet ring drawn inside the field; the page-wide focus outline is off
   here so the two don't stack. */
.rename-input,
.rename-input:focus-visible {
  flex: 1;
  min-width: 0;
  height: 28px;
  margin: 0 -6px;
  padding: 0 6px;
  border: 0;
  border-radius: 7px;
  outline: none;
  background: color-mix(in srgb, var(--fg) 10%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 45%, transparent);
  color: var(--fg);
  font: inherit;
}

.rename-input::selection {
  background: color-mix(in srgb, var(--fg) 28%, transparent);
}

.head > .rename-input {
  font-weight: 600;
}

/* Icon-only pills are a fixed circle, so editing lets them grow to fit. */
.pill.editing {
  width: auto;
  padding: 0 12px 0 13px;
  justify-content: flex-start;
  background: color-mix(in srgb, var(--fg) 22%, transparent);
}

.pill .rename-input,
.pill .rename-input:focus-visible {
  flex: none;
  min-width: 90px;
  max-width: 200px;
  margin: 0;
  field-sizing: content;
}

.row.editing:hover {
  background: none;
}

/* Context menu */

.menu {
  position: fixed;
  z-index: 10;
  display: grid;
  min-width: 160px;
  padding: 6px;
  border-radius: 16px;
  background: var(--glass-surface);
  color: var(--ink);
  font-size: 13px;
  box-shadow: var(--glass-rim), 0 16px 48px rgb(10 25 60 / 0.22);
  backdrop-filter: blur(28px) saturate(180%);
}

.menu button {
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.menu button:hover,
.menu button:focus-visible {
  background: var(--fill);
}

.menu .danger {
  color: #c62828;
}

.menu .with-icon {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* An emoji in an icon's place, as wide as the icons. */
.menu .menu-emoji {
  flex: none;
  width: 16px;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
}

.menu .with-icon svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.menu-message {
  display: grid;
  gap: 4px;
  max-width: 240px;
  margin: 4px 10px 10px;
  line-height: 1.35;
}

.menu-message span:first-child {
  font-weight: 600;
}

.menu-message span:not(:first-child) {
  color: var(--ink-muted);
}

.menu .has-submenu {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.menu .has-submenu[aria-expanded="true"] {
  background: var(--fill);
}

.menu .has-submenu svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  color: var(--ink-muted);
}

/* A submenu item with an icon keeps the icon at its size, the chevron at the
   far end. */
.menu .has-submenu.switcher-item {
  justify-content: flex-start;
}

.menu .has-submenu.switcher-item .switcher-name {
  flex: 1;
}

.menu .has-submenu .switcher-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
  color: inherit;
}

/* A field in a menu, for naming a new folder. */
.menu-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 3px 6px 3px 10px;
}

.menu-input {
  flex: 1;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  outline: none;
  background: var(--fill);
  color: inherit;
  font: inherit;
}

.menu-input:focus {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent);
}

.submenu {
  max-width: 260px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

.submenu button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-empty {
  margin: 6px 10px;
  color: var(--ink-muted);
}

.menu-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.menu-actions button {
  text-align: center;
}

.menu-actions .danger,
.menu-actions .danger:hover,
.menu-actions .danger:focus-visible {
  background: #c62828;
  color: #fff;
}

/* New column */

.new-column {
  display: grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-button);
  color: var(--fg);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
}

.new-column:hover {
  background: var(--glass-button-hover);
}

.new-column svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

/* Pinned bookmarks */

#dock {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 12px 10px;
  align-content: flex-start;
  justify-content: center;
  /* Stays clear of the page buttons on narrow windows. */
  width: min(90vw, 100vw - 200px);
  /* Padding inside the scrolling area gives the pills' shadows room, so
     its edge doesn't cut them off; the margins give it back. */
  min-height: 76px;
  max-height: 138px;
  margin: 34px auto 0;
  padding: 6px 16px 20px;
  overflow-y: auto;
  scrollbar-width: none;
}

#dock[hidden] {
  display: none;
}

/* Without the pills, the columns still start below the page buttons. */
#dock[hidden] + #board {
  padding-top: 100px;
}

#dock.drop-end {
  border-radius: 25px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.pill {
  display: flex;
  flex: none;
  gap: 10px;
  align-items: center;
  max-width: 240px;
  height: 50px;
  padding: 0 18px 0 13px;
  border-radius: 25px;
  background: var(--glass-button);
  color: var(--fg);
  text-decoration: none;
  cursor: default;
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
}

.pill:hover {
  background: var(--glass-button-hover);
}

.pill {
  transition:
    background-color 160ms ease,
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.pill.leaning {
  scale: 1.03;
  transform: translate(var(--lean-x, 0), var(--lean-y, 0));
}

.pill:not(:has(.pill-title), .editing) {
  justify-content: center;
  width: 50px;
  padding: 0;
}

.pill img {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 5px;
}

.pill-emoji {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 20px;
  line-height: 1;
}

.pill-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* Page buttons */

/* Settings: a bare gear in the bottom-left corner that shows when the pointer
   comes near, as in Momentum; the settings open upward from it. */
.corner {
  position: fixed;
  z-index: 4;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-end;
  width: 92px;
  height: 200px;
  padding: 0 0 22px 24px;
}

/* Round glass buttons, like the full screen one in the opposite corner. */
.corner-gear {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-button);
  color: var(--fg);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  opacity: 0;
  translate: 0 8px;
  transition:
    background-color 160ms ease,
    opacity 240ms ease,
    translate 340ms cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.corner:hover .corner-gear,
.corner-gear:focus-visible,
body:has(.settings-screen) .corner-gear {
  opacity: 1;
  translate: 0;
}

.corner .corner-gear:hover {
  background: var(--glass-button-hover);
}

.corner-gear svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: rotate 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.corner-gear svg .solid {
  fill: currentColor;
  stroke: none;
}

#settings:hover svg,
body:has(.settings-screen) #settings svg {
  rotate: 45deg;
}

/* Folder sync is waiting for Chrome's OK: the gear stays in view, with a dot. */
.corner.sync-paused #settings {
  position: relative;
  opacity: 1;
  translate: 0;
}

.corner.sync-paused #settings::after {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e8833a;
  box-shadow: 0 0 0 2px var(--glass-button);
  content: "";
}

.board-end {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  align-self: center;
}

.new-column svg {
  stroke-linejoin: round;
}

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: -2px;
}

/* Color picker */

.picker,
.swatches {
  display: grid;
  grid-template-columns: repeat(6, 26px);
  gap: 6px;
}

/* Eighteen tints in three rows of six: neutrals, then earthy, then color. */

.picker {
  position: absolute;
  z-index: 1;
  top: 40px;
  right: 8px;
  padding: 10px;
  border-radius: 20px;
  background: var(--glass-surface);
  color: var(--ink);
  box-shadow: var(--glass-rim), 0 16px 48px rgb(10 25 60 / 0.22);
  backdrop-filter: blur(28px) saturate(180%);
}

/* Settings */

/* The Settings window (see .settings-screen) carries this class too, which
   other code looks for to know an overlay is open. */
.settings {
  color: var(--ink);
}

/* Reading list */

.reading-entries {
  display: grid;
  align-content: start;
}


.reading-form {
  display: grid;
  gap: 6px;
}

.reading-form input {
  height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: var(--hover);
  color: inherit;
  font: inherit;
}

.reading-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.reading-actions button {
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font: inherit;
}

.reading-actions button[type="submit"] {
  background: color-mix(in srgb, var(--fg) 20%, transparent);
  color: var(--fg);
  font-weight: 600;
}

.reading-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  opacity: 0;
}

.reading-item:hover .reading-remove,
.reading-remove:focus-visible {
  opacity: 1;
}

.reading-remove:hover {
  background: color-mix(in srgb, var(--fg) 20%, transparent);
  color: var(--fg);
}

.reading-remove svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
}

.reading-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}

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

.reading-item img {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.reading-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

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

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

/* An empty ring for unread, a filled check for read. */
.reading-mark {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1.5px solid color-mix(in srgb, var(--fg) 45%, transparent);
  border-radius: 50%;
  background: none;
}

.reading-mark:hover {
  border-color: var(--fg);
}

/* The check is cut out of the filled ring, so the page shows through it. */
.reading-mark[aria-pressed="true"] {
  border-color: var(--fg);
  background: var(--fg);
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.8' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 14px no-repeat,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.reading-empty {
  margin: 10px;
  color: var(--muted);
}

.settings output {
  color: var(--ink-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.settings-note {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.switch {
  position: relative;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: 10px;
  background: var(--line-strong);
  transition: background 160ms ease;
  appearance: none;
}

.switch::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: translate 160ms ease;
  content: "";
}

.switch:checked {
  background: var(--switch-on);
}

.switch:checked::after {
  translate: 14px;
}

.settings input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--ink);
}

.swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 50%;
  background: var(--bg);
}

.swatch[aria-pressed="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Side panel: a single column filling the panel, switched from its title. */

.panel .corner,
.panel #dock {
  display: none;
}

html.panel {
  overscroll-behavior-x: none;
}

.panel #dock + #board {
  padding: 0;
  overflow: clip;
}

.panel #board {
  position: relative;
}

.panel-track {
  display: flex;
  flex: 1 0 100%;
  min-width: 0;
}

.panel-track.settling {
  transition: translate 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.panel .column {
  flex: 0 0 100%;
  border-radius: 0;
  box-shadow: none;
}

.panel .column::before {
  box-shadow: none;
}

.panel .column::after {
  display: none;
}

/* A fixed bar over the spaces: the current title centered, the other spaces'
   icons on both sides. The color brush moves to the title's context menu. */
.panel .column {
  padding-top: 48px;
}

.panel .column > .head {
  display: none;
}

.panel-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 4px;
  align-items: center;
  height: 48px;
  padding: 0 8px;
  color: var(--fg);
}

.panel-title {
  min-width: 0;
}

.panel-bar .head {
  justify-content: center;
  height: 48px;
  padding: 0;
  color: var(--muted);
}

.panel-bar .head-title {
  flex: 0 1 auto;
}

.panel-bar .head-actions {
  display: none;
}

.panel-bar .switcher-pill {
  max-width: calc(100vw - 104px);
  margin: 0;
}

.space-icons {
  display: flex;
  gap: 2px;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.space-icons.before {
  justify-content: flex-end;
  mask-image: linear-gradient(to right, transparent, #000 20px);
}

.space-icons.after {
  mask-image: linear-gradient(to left, transparent, #000 20px);
}

.space-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg);
  font-size: 12px;
  opacity: 0.45;
  scale: 0.9;
  transition: opacity 120ms ease, scale 160ms ease, background-color 120ms ease;
}

.space-icon:hover,
.space-icon:focus-visible {
  background: var(--hover);
  opacity: 1;
  scale: 1;
}

/* A ring keeps a dot visible on a space of the same color. */
.space-icon .switcher-dot {
  width: 9px;
  height: 9px;
  border-color: color-mix(in srgb, var(--fg) 45%, transparent);
}

.space-icon svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.space-icon .solid {
  fill: currentColor;
  stroke: none;
}

.switcher-pill {
  display: flex;
  flex: 0 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  height: 30px;
  margin-left: -9px;
  padding: 0 8px 0 9px;
  border-radius: 15px;
  outline: none;
  transition: background-color 120ms ease;
}

.switcher-pill:hover,
.switcher-pill:focus-visible,
.switcher-pill[aria-expanded="true"] {
  background: var(--hover);
  color: var(--fg);
}

.switcher-pill:has(.rename-input) {
  background: none;
}

.switcher-pill:has(.rename-input) .switcher-chevron {
  display: none;
}

.switcher-chevron {
  display: grid;
  flex: none;
  place-items: center;
  width: 14px;
  margin-left: -2px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.switcher-pill:hover .switcher-chevron,
.switcher-pill:focus-visible .switcher-chevron,
.switcher-pill[aria-expanded="true"] .switcher-chevron {
  opacity: 1;
}

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

.switcher {
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: 70vh;
  overflow-y: auto;
}

.menu .switcher-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.switcher-item[aria-checked="true"] {
  font-weight: 600;
}

.switcher-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  font-size: 14px;
}

.switcher-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.switcher-icon .solid {
  fill: currentColor;
  stroke: none;
}

.switcher-dot {
  width: 12px;
  height: 12px;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 50%;
  background: var(--bg);
}

.switcher-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Bookmarks hidden: a clock and greeting in their place. */

.side-divider {
  width: 22px;
  margin: 2px auto;
  border: 0;
  border-top: 1.5px solid color-mix(in srgb, var(--fg) 22%, transparent);
}

/* Bookmarks or clock: a vertical segmented control whose thumb slides to the
   chosen one. The thumb carries its own view transition name, so it glides
   while the page crossfades. */
.mode-switch {
  position: relative;
  display: grid;
  gap: 2px;
  width: 44px;
  padding: 3px;
  border-radius: 22px;
  background: var(--glass-button);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  transition:
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mode-switch.leaning {
  scale: 1.03;
  transform: translate(var(--lean-x, 0), var(--lean-y, 0));
}

.mode-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--glass-button-on);
  box-shadow: var(--glass-rim), 0 2px 8px rgb(10 25 60 / 0.15);
  transition: translate 300ms cubic-bezier(0.25, 1, 0.5, 1);
}

.mode-switch[data-mode="clock"] .mode-thumb {
  translate: 0 40px;
}

.mode-switch[data-mode="notes"] .mode-thumb {
  translate: 0 80px;
}

.mode-switch[data-mode="videos"] .mode-thumb {
  translate: 0 120px;
}

.mode-segment {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg);
  opacity: 0.65;
  transition: color 200ms ease, opacity 200ms ease;
}

.mode-segment:hover {
  opacity: 1;
}

/* Black or white, whichever the thumb isn't. */
.mode-segment[aria-checked="true"] {
  color: var(--fg);
  opacity: 1;
}

.mode-segment svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

/* While the page crossfades between modes, the buttons on the left stay live
   instead, so their dimming and the thumb animate in place. */
.side-toggles {
  view-transition-name: side-buttons;
}

::view-transition-old(side-buttons) {
  display: none;
}

::view-transition-new(side-buttons) {
  animation: none;
}

.bookmarks-hidden .column:not(.side),
.bookmarks-hidden .folder-tiles,
.bookmarks-hidden .board-end {
  display: none;
}

/* With no side column open, the clock has the window to itself: the buttons
   on the left float over the page, out of the layout so the clock centers on
   the window, and only show while the pointer is near them. The buttons fade
   rather than their stack, which would stop their glass blurring. */
.bookmarks-hidden #board:not(:has(> .column.side:not(.collapsed))) > .side-toggles {
  position: fixed;
  z-index: 3;
  top: 50%;
  left: 24px;
  margin-top: 0;
  translate: -14px -50%;
  pointer-events: none;
  transition: translate 340ms cubic-bezier(0.2, 0.8, 0.2, 1);

  & > * {
    opacity: 0;
    transition:
      opacity 240ms ease,
      background-color 160ms ease;
  }
}

.bookmarks-hidden.rail-peek #board:not(:has(> .column.side:not(.collapsed))) > .side-toggles,
.bookmarks-hidden #board:not(:has(> .column.side:not(.collapsed))) > .side-toggles:has(:focus-visible) {
  translate: 0 -50%;
  pointer-events: auto;

  & > * {
    opacity: 1;
  }
}

.clock {
  display: none;
}

/* The time, greeting and pills are centered together in the window, between
   two equal spaces. The clock reaches past the board's top and bottom
   margins so the middle is the window's. */
.bookmarks-hidden .clock {
  position: relative;
  display: grid;
  flex: 1;
  grid-template-rows: 1fr auto auto auto auto auto 1fr;
  justify-items: center;
  min-width: 0;
  margin: -72px 0 calc(clamp(56px, 10vh, 140px) * -1);
  /* The time and greeting are a picture, not text to copy. */
  user-select: none;
  cursor: default;
  color: var(--fg);
  text-align: center;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.12);
}

/* The columns still clear the page buttons with the pills moved away. */
.bookmarks-hidden #board {
  padding-top: 72px;
}

.clock-time {
  grid-row: 2;
}

.clock-greeting {
  grid-row: 3;
}

.clock-info {
  grid-row: 4;
}

.clock #dock {
  grid-row: 5;
  width: min(720px, 90%);
  margin: 48px auto 0;
  /* Under the clock every row of pills shows; only a very long list scrolls. */
  max-height: 50vh;
  text-shadow: none;
}

/* Set like the iPhone lock screen: SF's display cut, proportional digits so a
   1 doesn't sit in a full-width slot, display tracking, and the font's own
   case-sensitive colon, centered on the numerals. */
.clock-time {
  font-family: "SF Pro Rounded", ui-rounded, "SF Pro Display", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-size: clamp(80px, 11vw, 176px);
  font-weight: 600;
  font-variant-numeric: proportional-nums;
  font-feature-settings: "calt", "case";
  letter-spacing: -0.05em;
  line-height: 1;
  /* Room for the last digit, which the tight tracking pulls past the box
     the fill is clipped to. */
  padding: 0 0.08em;
  /* Liquid glass digits: a fill that thins toward the bottom so the page
     shows through, a bright rim, and a lift off the page. */
  color: transparent;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--fg) 94%, transparent) 10%,
    color-mix(in srgb, var(--fg) 58%, transparent) 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.4);
  paint-order: stroke fill;
  text-shadow: none;
  filter: drop-shadow(0 1px 0.5px rgb(255 255 255 / 0.3)) drop-shadow(0 10px 28px rgb(0 0 0 / 0.2));
}

.clock-separator {
  display: inline-block;
  margin: 0 0.035em;
  font-weight: 500;
}

.clock-greeting {
  margin-top: 10px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: 0.005em;
  opacity: 0.88;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-input {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: none;
  color: inherit;
  font: inherit;
}

.settings-input:focus-visible {
  border-color: var(--line-strong);
}

/* Background image, behind everything; its edges are pushed past the window
   so blurring doesn't fade them in. */

.backdrop {
  position: fixed;
  z-index: -1;
  inset: calc(var(--backdrop-blur, 0px) * -2);
  background: center / cover no-repeat;
  filter: blur(var(--backdrop-blur, 0px));
  opacity: var(--backdrop-opacity, 1);
  pointer-events: none;
}

.backdrop[hidden] {
  display: none;
}

.settings-buttons {
  display: flex;
  gap: 6px;
}

.settings-button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: var(--fill);
  color: inherit;
  font: inherit;
  font-weight: 500;
}

.settings-button:hover {
  background: var(--fill-strong);
}

.settings-button[hidden] {
  display: none;
}

.settings-note:empty {
  display: none;
}

/* Settings: a centered window of liquid glass over a dimmed page, the
   groups down the left and the chosen group's settings on the right. */
.settings.settings-screen {
  --settings-fill: light-dark(rgb(255 255 255 / 0.36), rgb(34 36 42 / 0.46));
  --settings-sheen: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.1));
  --settings-rim: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.32));
  --settings-rim-soft: light-dark(rgb(255 255 255 / 0.25), rgb(255 255 255 / 0.05));
  --settings-panel: light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.06));
  --settings-panel-rim: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.09));
  --settings-raised: light-dark(rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.2));
  --settings-hover: light-dark(rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.07));
  --settings-hairline: light-dark(rgb(20 30 60 / 0.08), rgb(255 255 255 / 0.08));
  --settings-shadow: rgb(10 20 50 / 0.12);
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  max-height: none;
  padding: 0;
  overflow: hidden;
  mask-image: none;
  font-size: 14px;
}

/* Beside the window, not around it: anything that blurs what's behind it
   would leave the window's own glass only itself to blur. */
.settings-scrim {
  position: absolute;
  inset: 0;
  background: light-dark(rgb(20 26 45 / 0.08), rgb(0 0 0 / 0.26));
  backdrop-filter: blur(3px);
  animation: settings-fade 240ms ease;
}

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

.settings-window {
  position: relative;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 6px;
  width: min(960px, 100vw - 64px);
  height: min(640px, 100vh - 64px);
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(155deg, var(--settings-sheen), transparent 42%), var(--settings-fill);
  box-shadow:
    inset 0 1px 0 var(--settings-rim),
    inset 0 -1px 0 var(--settings-rim-soft),
    0 50px 120px -30px rgb(10 20 50 / 0.5),
    0 14px 36px rgb(10 20 50 / 0.16);
  backdrop-filter: blur(50px) saturate(220%);
  animation: settings-rise 320ms cubic-bezier(0.2, 0.9, 0.25, 1);
}

/* The rim catches the light at the top left, and again faintly at the
   bottom right, as Liquid Glass does. */
.settings-window::before {
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(140deg, var(--settings-rim), var(--settings-rim-soft) 30%, transparent 55%, var(--settings-rim-soft) 85%, var(--settings-rim));
  pointer-events: none;
  content: "";
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Closing: the window sinks back as the page clears. */
.settings-screen.closing {
  pointer-events: none;
}

.settings-screen.closing .settings-scrim {
  animation: settings-fade 200ms ease reverse forwards;
}

.settings-screen.closing .settings-window {
  animation: settings-sink 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes settings-sink {
  to {
    opacity: 0;
    scale: 0.97;
    translate: 0 6px;
  }
}

@keyframes settings-rise {
  from {
    opacity: 0;
    scale: 0.96;
    translate: 0 8px;
  }
}

/* The groups sit in a panel of their own, inset in the window. */
.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
  padding: 18px 10px;
  overflow-y: auto;
  border-radius: 25px;
  background: var(--settings-panel);
  box-shadow:
    inset 0 1px 0 var(--settings-panel-rim),
    0 1px 3px var(--settings-shadow);
  scrollbar-width: none;
}

.settings-nav h1 {
  margin: 4px 10px 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Who the page greets, at the top of the sidebar as in visionOS. */
.settings-profile {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 2px 8px 16px;
}

.settings-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(145deg, #79a8ff, #a77bff 55%, #ff8db0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 2px 8px rgb(10 20 50 / 0.18);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}

/* Without a name, a silhouette. */
.settings-avatar.empty {
  background: linear-gradient(160deg, #b9bec8, #8c929d);
}

.settings-avatar.empty::before {
  width: 22px;
  height: 22px;
  background: #fff;
  content: "";
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.5'/%3E%3Cpath d='M3 21.5c0-4.7 4-8 9-8s9 3.3 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.settings-profile-text {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.settings-name {
  min-width: 0;
  margin: 0 0 0 -5px;
  padding: 2px 5px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  outline: none;
}

.settings-name::placeholder {
  color: var(--ink-muted);
}

.settings-name:hover,
.settings-name:focus {
  background: var(--settings-hover);
}

.settings-profile-status {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-profile-status:hover {
  color: var(--ink);
}

.settings-profile-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.settings-profile-status[data-state="on"] i {
  background: #34c759;
  opacity: 1;
}

.settings-profile-status[data-state="paused"] i {
  background: #e8833a;
  opacity: 1;
}

/* Light, Dark or System, the width of the sidebar. */
.settings-appearance {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 4px 14px;
}

.settings-appearance button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 0 4px;
  font-size: 12px;
}

.segment-icon {
  display: grid;
  flex: none;
}

.segment-icon svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.segment-icon svg .solid {
  fill: currentColor;
  stroke: none;
}

.settings-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--settings-hairline);
}

.settings-nav-item {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: left;
  transition: background 140ms ease;
}

.settings-nav-item:hover {
  background: var(--settings-hover);
}

.settings-nav-item[aria-current="page"] {
  background: var(--settings-raised);
  box-shadow: 0 1px 2px var(--settings-shadow), 0 4px 14px rgb(10 20 50 / 0.06);
}

.settings-nav-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(rgb(255 255 255 / 0.22), transparent), var(--tint);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.4);
  color: #fff;
}

.settings-nav-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

/* The header and the cards share one column, so the title, the cards'
   edges and the close button all line up. */
.settings-pane {
  --settings-inset: 26px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.settings-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--settings-inset) 16px;
}

.settings .settings-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.settings-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--settings-panel);
  box-shadow: inset 0 1px 0 var(--settings-panel-rim), 0 1px 2px var(--settings-shadow);
  color: inherit;
}

.settings-close:hover {
  background: var(--settings-raised);
}

.settings-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.settings-groups {
  display: grid;
  padding: 0 var(--settings-inset) var(--settings-inset);
}

.settings-groups > * + * {
  margin-top: 22px;
}

.settings-group {
  display: grid;
  gap: 8px;
}

.settings-group[hidden],
.settings-card[hidden] {
  display: none;
}

/* Once the page is drawn, a group that a switch shows or hides eases open
   and shut instead of jumping. */
.settings-groups.settled > .settings-group {
  overflow: clip;
  overflow-clip-margin: 8px;
  transition:
    opacity 220ms ease,
    height 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    margin-top 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    translate 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
    display 300ms allow-discrete;
  interpolate-size: allow-keywords;
}

.settings-groups.settled > .settings-group[hidden] {
  height: 0;
  margin-top: 0;
  opacity: 0;
  translate: 0 -6px;
}

@starting-style {
  .settings-groups.settled > .settings-group:not([hidden]) {
    height: 0;
    margin-top: 0;
    opacity: 0;
    translate: 0 -6px;
  }
}

.settings-group > h3 {
  margin: 0 0 0 16px;
  color: light-dark(rgb(20 28 50 / 0.66), rgb(255 255 255 / 0.62));
  font-size: 12.5px;
  font-weight: 600;
}

.settings-card {
  padding: 2px 16px;
  border-radius: 18px;
  background: var(--settings-panel);
  box-shadow:
    inset 0 1px 0 var(--settings-panel-rim),
    0 1px 3px var(--settings-shadow);
}

.settings-card-padded {
  padding: 14px 16px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 30px;
  padding: 12px 0;
}

.settings-row + .settings-row {
  border-top: 1px solid var(--settings-hairline);
}

.settings-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

/* Signing in to Firebase for the phone: two fields to a line. */
.cloud-sync-body {
  display: grid;
  gap: 10px;
}

.cloud-sync-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.settings-row-text {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.settings-row-split {
  display: flex;
  justify-content: space-between;
}

.settings-label {
  font-weight: 500;
}

.settings-row .settings-note {
  margin: 0;
  font-size: 12.5px;
}

.settings-tag {
  justify-self: start;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 6px;
  background: light-dark(rgb(232 131 58 / 0.14), rgb(232 131 58 / 0.2));
  color: light-dark(#a8541a, #f3a76b);
  font-size: 11.5px;
  font-weight: 500;
}

.settings-row .switch {
  flex: none;
}

.settings-row output {
  color: var(--ink-muted);
}

/* Fields and buttons in the glass: frosted, with a hairline. */
.settings-screen .settings-input {
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--settings-raised);
  box-shadow: 0 0 0 1px var(--settings-hairline), 0 1px 2px var(--settings-shadow);
}

.settings-row > .settings-input {
  flex: none;
  width: 240px;
}

.settings-screen .settings-button {
  border-radius: 10px;
  background: var(--settings-raised);
  box-shadow: 0 0 0 1px var(--settings-hairline), 0 1px 2px var(--settings-shadow);
}

.settings-screen .settings-button:hover {
  background: light-dark(#fff, rgb(255 255 255 / 0.22));
}

.settings-screen .settings-buttons {
  flex-wrap: wrap;
}

.settings-screen .weather-city {
  width: 220px;
}

.settings-segments {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: light-dark(rgb(20 30 60 / 0.07), rgb(255 255 255 / 0.08));
}

.settings-segments button {
  min-width: 64px;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.settings-segments button[aria-checked="true"] {
  background: var(--settings-raised);
  box-shadow: 0 1px 3px var(--settings-shadow);
}

/* Sliders: a thin track filled up to the thumb, and a white knob. */
.settings-screen input[type="range"] {
  height: 20px;
  margin: 0;
  background: none;
  appearance: none;
}

.settings-screen input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--ink) var(--fill, 50%),
    light-dark(rgb(20 30 60 / 0.14), rgb(255 255 255 / 0.16)) var(--fill, 50%)
  );
}

.settings-screen input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.22);
  appearance: none;
}

/* Background: a preview of the page's background, under three panes of
   glass standing in for the columns. */
.bg-preview {
  position: relative;
  isolation: isolate;
  height: 176px;
  overflow: hidden;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px light-dark(rgb(255 255 255 / 0.5), rgb(255 255 255 / 0.1)),
    0 1px 3px var(--settings-shadow);
}

.bg-preview-color,
.bg-preview-image {
  position: absolute;
  inset: 0;
}

.bg-preview-color {
  background: var(--bg);
}

.bg-preview-color[data-wallpaper] {
  filter: hue-rotate(var(--wallpaper-hue, 0deg)) var(--wallpaper-filter,);
}

.bg-preview-image {
  inset: -12px;
  background: center / cover no-repeat;
}

.bg-preview-image[hidden] {
  display: none;
}

/* The column settings show the board's first columns at full size, cut off
   at the bottom. */
.column-preview {
  height: 290px;
}

.column-preview-board {
  position: absolute;
  inset: 22px 0 0 26px;
  display: flex;
  gap: var(--column-gap, 16px);
  align-items: flex-start;
  mask-image: linear-gradient(#000 72%, transparent);
}

.column-preview-board > .column {
  height: 460px;
  margin: 0;
}

/* The board at about a third of its size: the columns follow the page's
   column width and glass as they change. */
.bg-preview-columns {
  position: absolute;
  inset: 24px 0 -24px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.bg-preview-column {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 7px;
  width: calc(var(--column-width) * 0.3);
  padding: 12px 10px;
  border-radius: 14px;
  color: var(--fg);
}

.bg-preview-column::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(165deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0) 40%),
    linear-gradient(color-mix(in srgb, var(--tint, #3b3e45) var(--glass-tint, 60%), transparent) 0 0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 18px rgb(0 0 0 / 0.16);
  backdrop-filter: blur(6px) saturate(170%);
  content: "";
}

.pc-head {
  width: 55%;
  height: 6px;
  margin-bottom: 3px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.85;
}

.pc-row {
  height: 4px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.4;
}

.pc-row:nth-child(odd) {
  width: 78%;
}

.pc-row:nth-child(3n) {
  width: 62%;
}

.settings-swatches {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 12px 8px;
  justify-items: center;
}

.settings-swatches .swatch {
  width: 32px;
  height: 32px;
  border: 0;
  box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.16)), 0 1px 2px var(--settings-shadow);
  transition: scale 140ms ease;
}

.settings-swatches .swatch:hover {
  scale: 1.08;
}

.settings-swatches .swatch[aria-checked="true"] {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* The last swatch opens the color picker: a color wheel until a color of
   its own is picked. */
.swatch-custom {
  position: relative;
  grid-column-end: -1;
  background: conic-gradient(#ff5b5b, #ffd84d, #5ee67a, #4dd6ff, #5b6bff, #e05bff, #ff5b5b);
  cursor: pointer;
}

.swatch-custom.picked {
  background: var(--custom);
}

.swatch-custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-image .settings-row > .settings-buttons {
  flex: none;
}

.settings-thumb {
  flex: none;
  width: 64px;
  height: 44px;
  border-radius: 10px;
  background: center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1), 0 1px 3px var(--settings-shadow);
}

.settings-slider-inline {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 48px;
  gap: 14px;
}

.settings-slider-inline output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* No image yet: a place to drop one. */
.settings-drop {
  display: grid;
  justify-items: center;
  gap: 3px;
  margin: 14px 0;
  padding: 22px 16px 18px;
  border: 1.5px dashed light-dark(rgb(20 30 60 / 0.18), rgb(255 255 255 / 0.18));
  border-radius: 14px;
  text-align: center;
  transition:
    background 140ms ease,
    border-color 140ms ease;
}

.settings-drop.over {
  border-color: var(--ink);
  background: var(--settings-hover);
}

.settings-drop-icon {
  margin-bottom: 4px;
  color: var(--ink-muted);
}

.settings-drop-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.settings-drop .settings-button {
  margin-top: 10px;
}

/* The side panel is too narrow for two columns: the groups run across the
   top instead. */
@media (max-width: 640px) {
  .settings-window {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    border-radius: 28px;
  }

  .settings-nav {
    padding: 10px;
    overflow: visible;
    border-radius: 20px;
  }

  .settings-nav h1 {
    display: none;
  }

  .settings-profile {
    padding: 0 2px 10px;
  }

  .settings-appearance {
    margin: 0 0 10px;
  }

  .settings-nav-list {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-swatches {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .settings-image .settings-row:has(> .settings-thumb) {
    flex-wrap: wrap;
  }

  .settings-nav-item:not([aria-current="page"]) > span:last-child {
    display: none;
  }

  .settings-pane {
    --settings-inset: 8px;
  }

  /* Switches stay beside their names; fields go under them. */
  .settings-row:has(> .settings-input, > .settings-segments) {
    flex-wrap: wrap;
    gap: 10px;
  }

  .settings-row > .settings-input {
    width: 100%;
  }
}

/* Menus: a hairline between groups of items. */
.menu-separator {
  height: 1px;
  margin: 5px 8px;
  border: 0;
  background: var(--line);
}

/* The side columns' footer buttons, offered once the pointer is over the
   column, like a folder's Add Bookmark. */
.side-footer {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  flex: none;
  padding: 0 10px 14px;
  pointer-events: none;
}

/* A glass pill like the page's other buttons, lined up with the rows. */
.side-footer-button {
  width: 100%;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: var(--glass-button);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  transition: background-color 160ms ease, opacity 160ms ease;
}

.side-footer-button:hover {
  background: var(--glass-button-hover);
}

/* Downloads: a row opens its file, with progress drawn under it. */
.row.download-row {
  position: relative;
}

.download-row.openable {
  cursor: pointer;
}

.download-row.unavailable .row-title {
  color: var(--muted);
}

.download-progress {
  position: absolute;
  right: 8px;
  bottom: 4px;
  left: 34px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hover);
}

.download-progress::after {
  display: block;
  width: var(--progress);
  height: 100%;
  background: var(--fg);
  transition: width 400ms ease;
  content: "";
}

/* Recently Deleted: deleted bookmarks and closed tabs, each with a way back. */
.deleted-section + .deleted-section {
  margin-top: 18px;
}

.deleted-section h3 {
  display: flex;
  align-items: center;
  height: 36px;
  margin: 0;
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.row.deleted-row {
  height: 48px;
  cursor: default;
}

.deleted-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.deleted-detail {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Takes no room until the row is hovered, so the text isn't cut short. */
.deleted-action {
  flex: none;
  max-width: 0;
  height: 26px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 13px;
  background: var(--hover);
  color: var(--fg);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

.deleted-row:hover .deleted-action,
.deleted-row:focus-within .deleted-action {
  max-width: 100px;
  padding: 0 10px;
  opacity: 1;
}

.deleted-action:hover {
  background: color-mix(in srgb, var(--fg) 20%, transparent);
}

/* Notes mode: a white sheet, or black in dark mode, with only the text and the
   side buttons, in the manner of ZenPen. */

html:has(> body.notes-mode) {
  --fg: light-dark(#1d1d1f, #f5f5f7);
  --muted: light-dark(rgb(0 0 0 / 0.42), rgb(255 255 255 / 0.42));
  --hover: light-dark(rgb(0 0 0 / 0.06), rgb(255 255 255 / 0.08));
  background: light-dark(#fff, #000);
}

body.notes-mode::before {
  display: none;
}

.notes-mode :is(.side-toggle, .mode-switch, .mode-thumb) {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  box-shadow: none;
  backdrop-filter: none;
}

.notes-mode .side-toggle[aria-pressed="true"],
.notes-mode .mode-thumb {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
}

.notes-mode .backdrop,
.notes-mode #dock,
.notes-mode #board > .column,
.notes-mode .folder-tiles,
.notes-mode .board-end,
.notes-page {
  display: none;
}

/* The page runs to the window's bottom edge, rather than stopping above
   the room kept for the search bar, which notes mode hides. */
.notes-mode #board {
  padding-bottom: 0;
}

.notes-mode .notes-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin-top: -12px;
  overflow-y: auto;
  scrollbar-width: none;
}

.notes-sheet {
  flex: none;
  width: min(680px, 100%);
  padding: clamp(48px, 9vh, 96px) 24px 30vh;
}

.notes-editor {
  min-height: 100%;
  outline: none;
  color: var(--fg);
  font-family: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  font-size: 21px;
  line-height: 1.75;
  overflow-wrap: anywhere;
  caret-color: var(--fg);
}

.notes-editor:empty::before {
  content: "Start writing…";
  color: var(--muted);
}

.notes-editor b,
.notes-editor strong {
  font-weight: 650;
}

.notes-editor :is(ul, ol) {
  margin: 0.4em 0;
  padding-left: 1.3em;
}

.notes-editor :is(h1, h2, h3) {
  margin: 0.9em 0 0.3em;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.notes-editor h1 {
  font-size: 1.65em;
}

.notes-editor h2 {
  font-size: 1.35em;
}

.notes-editor h3 {
  font-size: 1.12em;
}

.notes-editor > :is(h1, h2, h3):first-child {
  margin-top: 0;
}

.notes-editor :is(code, pre) {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgb(127 127 127 / 0.14);
}

.notes-editor code {
  padding: 0.1em 0.3em;
  border-radius: 5px;
  font-size: 0.8em;
}

.notes-editor pre {
  margin: 0.8em 0;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.notes-editor hr {
  height: 1px;
  margin: 1.4em 0;
  border: 0;
  background: var(--fg);
  opacity: 0.2;
}

.notes-editor a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
}

.notes-editor :is(s, strike) {
  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}

/* A task's box sits where its bullet would, and ticks with a click. */
.notes-editor li.task {
  position: relative;
  list-style: none;
}

.notes-editor li.task::before {
  content: "";
  position: absolute;
  top: 0.42em;
  left: -1.25em;
  width: 0.8em;
  height: 0.8em;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--fg) 45%, transparent);
  border-radius: 0.24em;
  cursor: pointer;
}

.notes-editor li.task[data-checked]::before {
  border-color: var(--fg);
  background: var(--fg);
}

.notes-editor li.task[data-checked]::after {
  content: "";
  position: absolute;
  top: 0.53em;
  left: -1.02em;
  width: 0.2em;
  height: 0.4em;
  border: solid light-dark(#fff, #000);
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.notes-editor li.task[data-checked] {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
}

.notes-editor blockquote {
  margin: 0.8em 0;
  padding-left: 1em;
  border-left: 3px solid var(--fg);
  color: var(--muted);
  font-style: italic;
}

.notes-count {
  position: fixed;
  right: 28px;
  bottom: 24px;
  display: none;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.notes-mode .notes-count {
  display: block;
}

/* The views of notes mode, and beside them for Goals its layout. The bar
   takes no room: it floats over the top of the page, and shows only while
   the pointer is near it (see kanban.js) or it has the keyboard. */
.notes-view-bar {
  position: sticky;
  top: 12px;
  z-index: 3;
  display: flex;
  flex: none;
  gap: 8px;
  margin-bottom: -32px;
  opacity: 0;
  translate: 0 -6px;
  transition:
    opacity 180ms ease,
    translate 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.notes-page.show-view-switch .notes-view-bar,
.notes-view-bar:hover,
.notes-view-bar:has(:focus-visible) {
  opacity: 1;
  translate: 0;
}

:is(.notes-view-switch, .goals-layout-switch) {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg) 7%, light-dark(rgb(255 255 255 / 0.82), rgb(0 0 0 / 0.82)));
  box-shadow: 0 6px 24px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5));
  backdrop-filter: blur(16px) saturate(180%);
}

.notes-page:not([data-view="goals"]) .goals-layout-switch {
  display: none;
}

.notes-view-bar .goals-layout-switch button {
  display: grid;
  place-items: center;
  padding: 5px 10px;
}

.goals-layout-switch svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

:is(.notes-view-switch, .goals-layout-switch) button {
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 13px/1.2 sans-serif;
  font-family: inherit;
}

:is(.notes-view-switch, .goals-layout-switch) button:hover {
  color: var(--fg);
}

:is(.notes-view-switch, .goals-layout-switch) button[aria-checked="true"] {
  background: light-dark(#fff, rgb(255 255 255 / 0.16));
  box-shadow: light-dark(0 1px 3px rgb(0 0 0 / 0.12), none);
  color: var(--fg);
}

.notes-page:not([data-view="notes"]) :is(.notes-sheet, .notes-count),
.notes-page:not([data-view="board"]) .kanban,
.notes-page:not([data-view="goals"]) .goals-minimap-host,
.notes-page:not([data-view="goals"]) .goals {
  display: none;
}

/* The board: a row per project, a column per stage. */
.kanban {
  --kanban-columns: repeat(4, minmax(210px, 1fr));
  box-sizing: border-box;
  width: min(1360px, 100%);
  padding: 28px 84px 30vh;
  overflow-x: auto;
  scrollbar-width: none;
}

[data-stage="todo"] {
  --stage: light-dark(#8e8e93, #98989d);
}

[data-stage="week"] {
  --stage: light-dark(#b8742f, #d0965a);
}

[data-stage="doing"] {
  --stage: light-dark(#2f6fde, #4c8dff);
}

[data-stage="done"] {
  --stage: light-dark(#2f9a52, #4cb36e);
}

[data-stage="dropped"] {
  --stage: light-dark(#b5524a, #d3736a);
}

.kanban-heads,
.kanban-lanes {
  display: grid;
  grid-template-columns: var(--kanban-columns);
  gap: 12px;
}

.kanban-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 14px;
  background: light-dark(color-mix(in srgb, var(--stage) 8%, transparent), color-mix(in srgb, var(--stage) 12%, transparent));
}

.kanban-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage) 20%, transparent);
  color: var(--fg);
  font-size: 13px;
  font-weight: 550;
}

.kanban-pill i,
.kanban-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--stage);
}

.kanban-count {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.kanban-project {
  margin-top: 18px;
}

.kanban-project-head,
.goals-area-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: -8px;
  padding: 4px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--fg);
  font: 600 15px/1.3 sans-serif;
  font-family: inherit;
}

.kanban-project-head:hover,
.goals-area-head:hover,
.kanban-project-head.drop-target {
  background: var(--hover);
}

.kanban-project-head svg,
.goals-area-head svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: rotate 160ms ease;
}

.kanban-project-head[aria-expanded="false"] svg,
.goals-area-head[aria-expanded="false"] svg {
  rotate: -90deg;
}

.kanban-project-emoji,
.goals-area-emoji {
  display: grid;
  place-items: center;
  width: 28px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  font-size: 14px;
}

.kanban-lanes {
  margin-top: 8px;
}

.kanban-lane {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 52px;
  padding: 8px;
  border-radius: 16px;
  background: light-dark(color-mix(in srgb, var(--stage) 7%, transparent), color-mix(in srgb, var(--stage) 11%, transparent));
  transition: background 120ms ease;
}

.kanban-lane.drop-target {
  background: color-mix(in srgb, var(--stage) 15%, transparent);
}

.kanban-card,
.kanban-new {
  position: relative;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--stage) 22%, transparent);
  border-radius: 12px;
  background: light-dark(#fff, color-mix(in srgb, var(--stage) 12%, #161618));
  box-shadow: light-dark(0 1px 2px rgb(0 0 0 / 0.06), none);
}

.kanban-card {
  cursor: pointer;
}

.kanban-card:hover {
  border-color: color-mix(in srgb, var(--stage) 45%, transparent);
}

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

.kanban-card.drop-before::before,
.kanban-lane.drop-end::after {
  content: "";
  position: absolute;
  top: -6px;
  right: 4px;
  left: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--stage);
}

.kanban-card-title {
  padding-right: 18px;
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 550;
  line-height: 1.4;
  overflow-wrap: anywhere;
  outline: none;
}

.kanban-card-title[contenteditable] {
  cursor: text;
}

.kanban-card.editing {
  cursor: default;
  border-color: color-mix(in srgb, var(--stage) 55%, transparent);
}

.kanban-card-description,
.item-description-field {
  margin-top: 4px;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font: 400 13px/1.45 sans-serif;
  font-family: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.kanban-card-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.item-description-field {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  outline: none;
  resize: none;
  overflow: hidden;
}

.item-description-field::placeholder {
  color: var(--muted);
}

.kanban-show-done {
  margin-left: auto;
  padding: 2px 9px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage) 14%, transparent);
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  font: 500 12px/1.5 sans-serif;
  font-family: inherit;
}

.kanban-show-done:hover,
.kanban-show-done[aria-pressed="true"] {
  background: color-mix(in srgb, var(--stage) 26%, transparent);
  color: var(--fg);
}

.kanban-card-meta {
  display: flex;
  margin-top: 8px;
}

.kanban-card-meta:has(.kanban-due.empty):not(:has(.item-link)) {
  margin: 0;
}

.kanban-due {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: color-mix(in srgb, var(--fg) 75%, transparent);
  font: 500 12.5px/1.5 sans-serif;
  font-family: inherit;
}

.kanban-due:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
}

.kanban-due.today {
  background: color-mix(in srgb, currentColor 13%, transparent);
  color: light-dark(#c35a00, #ffa04d);
}

.kanban-due.overdue {
  background: color-mix(in srgb, currentColor 13%, transparent);
  color: light-dark(#d1242f, #ff6b6b);
}

/* Without a date, a clock in the corner on hover adds one. */
.kanban-due.empty {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px;
  background: none;
  opacity: 0;
}

.kanban-due.empty span {
  display: none;
}

.kanban-card:hover .kanban-due.empty,
.kanban-due.empty:focus-visible {
  opacity: 1;
}

.kanban-due svg,
.kanban-add svg,
.kanban-add-project svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kanban-add,
.kanban-add-project {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: color-mix(in srgb, var(--stage) 70%, var(--fg));
  font: 500 13.5px/1.3 sans-serif;
  font-family: inherit;
  opacity: 0.7;
}

.kanban-add:hover {
  background: color-mix(in srgb, var(--stage) 12%, transparent);
  opacity: 1;
}

.kanban-add-project {
  margin-top: 22px;
  margin-left: -10px;
  color: var(--muted);
  opacity: 1;
}

.kanban-add-project:hover {
  background: var(--hover);
  color: var(--fg);
}

.kanban-new {
  resize: none;
  field-sizing: content;
  min-height: 0;
  border-color: color-mix(in srgb, var(--stage) 55%, transparent);
  color: var(--fg);
  font: 550 14.5px/1.4 sans-serif;
  font-family: inherit;
  outline: none;
}

.kanban-new-project,
.kanban-rename {
  box-sizing: border-box;
  width: min(360px, 100%);
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent);
  border-radius: 10px;
  background: none;
  color: var(--fg);
  font: 600 15px/1.3 sans-serif;
  font-family: inherit;
  outline: none;
}

.kanban-new-project {
  margin-top: 22px;
}

.kanban-date-input {
  position: fixed;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Goals: areas that fold open like board projects, each with a Yearly and
   a Currently list. A goal's status is its color. */
.goals {
  box-sizing: border-box;
  width: min(1120px, 100%);
  padding: 28px 84px 30vh;
}

.goals-area {
  margin-top: 22px;
}

.goals-area:first-child {
  margin-top: 0;
}

.goals-area-head {
  font-size: 19px;
}

.goals-area-head.drop-target {
  background: var(--hover);
}

.goals-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}

/* No description, nothing shown: one is added from the right-click menu. */
.goals-text:empty {
  display: none;
}

.goals-text textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  outline: none;
  resize: none;
  overflow: hidden;
}

.goals-area-description {
  margin: 4px 0 0 30px;
  color: color-mix(in srgb, var(--fg) 70%, transparent);
  font-size: 14.5px;
  line-height: 1.5;
}

.goals-periods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* Side by side: a little tighter than stacked, and as wide as the window
   allows. */
.goals[data-layout="columns"] {
  width: min(1680px, 100%);
  padding: 24px 56px 30vh;
}

.goals[data-layout="columns"] .goals-area {
  margin-top: 20px;
}

.goals[data-layout="columns"] .goals-periods {
  gap: 12px;
  margin-top: 10px;
}

.goals[data-layout="columns"] .goals-period {
  gap: 4px;
  padding: 11px 12px 8px;
  border-radius: 14px;
}

.goals[data-layout="columns"] .goals-period-head {
  margin-bottom: 2px;
}

.goals[data-layout="columns"] .goal-card {
  padding: 7px 8px;
}

.goals[data-layout="columns"] .goal-card + .goal-card::before {
  top: -2px;
}

/* A calm page: the controls for changing it stay out of sight until the
   pointer comes near. New goal shows over its list, an area's chevron over
   the area, New Area over the end of the page; each also shows when
   reached with the keyboard. They keep their room, so nothing moves. */
.goals .goals-period > .kanban-add,
.goals .goals-area-head svg,
.goals > .kanban-add-project {
  opacity: 0;
  transition: opacity 180ms ease;
}

.goals .goals-period:hover > .kanban-add,
.goals .goals-period > .kanban-add:focus-visible,
.goals .goals-area:hover > .goals-area-head svg,
.goals .goals-area-head:focus-visible svg,
.goals > .kanban-add-project:hover,
.goals > .kanban-add-project:focus-visible {
  opacity: 1;
}

/* New Area's hover reaches up into the space after the last area. */
.goals > .kanban-add-project::before {
  content: "";
  position: absolute;
  inset: -28px -12px -12px;
}

/* Scrolled to an area, it lands below the floating view switch. */
.goals-area {
  scroll-margin-top: 56px;
}

/* The minimap: a line per area at the window's right edge, names on hover. */
.goals-minimap {
  position: fixed;
  z-index: 4;
  top: 50%;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
  padding: 6px;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  translate: 8px -50%;
  transition:
    opacity 180ms ease,
    translate 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 160ms ease,
    box-shadow 160ms ease;
}

.goals-minimap.shown {
  opacity: 1;
  pointer-events: auto;
  translate: 0 -50%;
}

.goals-minimap:hover {
  background: light-dark(rgb(255 255 255 / 0.86), rgb(28 28 30 / 0.86));
  box-shadow: 0 10px 30px light-dark(rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.5)), inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
  backdrop-filter: blur(16px) saturate(180%);
}

.goals-minimap-item {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  min-height: 22px;
  padding: 0 4px 0 8px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font: 500 13px/1.3 sans-serif;
  font-family: inherit;
  cursor: pointer;
}

.goals-minimap-item i {
  flex: none;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--fg) 25%, transparent);
  transition:
    width 160ms ease,
    background 160ms ease;
}

.goals-minimap-item.current i {
  width: 20px;
  background: color-mix(in srgb, var(--fg) 75%, transparent);
}

.goals-minimap-label {
  display: flex;
  gap: 8px;
  align-items: center;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition:
    max-width 200ms ease,
    opacity 160ms ease;
}

.goals-minimap:hover .goals-minimap-label {
  max-width: 220px;
  opacity: 1;
}

.goals-minimap-item:hover {
  background: var(--hover);
  color: var(--fg);
}

.goals-minimap-item.current {
  color: var(--fg);
}

.goals-minimap-emoji {
  width: 18px;
  text-align: center;
}

/* Stacked, Currently above Yearly. */
/* Stacked: each area a narrow column, Currently above Yearly, and the
   areas side by side, scrolling sideways. */
.goals[data-layout="rows"] {
  display: grid;
  grid-auto-columns: max-content;
  grid-auto-flow: column;
  gap: 36px;
  align-items: start;
  width: 100%;
  padding: 24px 56px 30vh;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 56px;
  scrollbar-width: none;
  /* Columns fade at the edges rather than being cut off. */
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 64px), transparent);
}

.goals[data-layout="rows"] .goals-area,
.goals[data-layout="rows"] .goals-area:first-child {
  width: 340px;
  margin-top: 0;
}

/* Folded, an area is a narrow strip with its name running down it, so it
   takes little room across. */
.goals[data-layout="rows"] .goals-area.collapsed {
  width: auto;
}

.goals[data-layout="rows"] .goals-area.collapsed .goals-area-head {
  margin: -6px -6px 0;
  padding: 0 6px 10px;
  writing-mode: vertical-rl;
}

.goals[data-layout="rows"] .goals-area.collapsed .goals-area-description {
  display: none;
}

.goals[data-layout="rows"] .goals-area-description {
  margin-left: 0;
}

.goals[data-layout="rows"] .goals-area-head {
  margin-left: -26px;
}

.goals[data-layout="rows"] .goals-periods {
  grid-template-columns: minmax(0, 1fr);
}

.goals[data-layout="rows"] > .kanban-add-project {
  align-self: start;
  margin-top: 4px;
  white-space: nowrap;
}

/* No accent color: Currently, what's happening now, is a filled panel with
   a strong name; Yearly, the longer view, is an outline with a quiet one. */
.goals-period {
  --stage: light-dark(#8e8e93, #98989d);
  --period: color-mix(in srgb, var(--fg) 45%, transparent);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-radius: 16px;
  transition:
    background 120ms ease,
    box-shadow 120ms ease;
}

.goals-period[data-period="current"] {
  --period: color-mix(in srgb, var(--fg) 70%, transparent);
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}

.goals-period[data-period="yearly"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
}

.goals-period.drop-target {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--period) 55%, transparent);
}

.goals-period[data-period="current"] .goals-period-name {
  color: var(--fg);
}

.goals-period[data-period="yearly"] .goals-period-name {
  color: color-mix(in srgb, var(--fg) 45%, transparent);
}

/* Pinned to the head's right edge, while the pointer is over the list: a
   dot and a count per status. */
.goals-stats {
  display: flex;
  gap: 10px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 150ms ease;
}

.goals-period:hover .goals-stats {
  opacity: 1;
}

.goals-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.goals-stat i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stage);
}

.goals-period-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px;
}

.goals-period-name {
  color: var(--fg);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.goals-period-description {
  margin: -2px 2px 4px;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-size: 13px;
  line-height: 1.45;
}

/* Goals are rows in a list, not cards: no box of their own, a hairline
   between them, and only the status tag in the status's color. */
.goal-card {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 -4px;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background 120ms ease;
}

.goal-card + .goal-card::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 8px;
  left: 8px;
  height: 1px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
}

.goal-card:hover,
.goal-card.editing {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}

.goal-card:hover::before,
.goal-card:hover + .goal-card::before,
.goal-card.editing::before,
.goal-card.editing + .goal-card::before {
  opacity: 0;
}

.goal-card.editing {
  cursor: default;
}

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

/* Where a dragged goal will land: a line above the goal it goes before, or
   at the foot of the list. */
.goal-card.drop-before::after,
.goals-period.drop-end::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 6px;
  left: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--period);
}

.goals-period.drop-end::after {
  top: auto;
  right: 18px;
  bottom: 8px;
  left: 18px;
}

/* New goal takes no room: a small pill on the middle of the list's bottom
   edge, shown while the pointer is over the list. */
.goals-period {
  position: relative;
}

.goals .goals-period > .kanban-add {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  gap: 4px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  background: light-dark(#fff, #1c1c1e);
  box-shadow:
    0 2px 10px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5)),
    inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
  color: var(--fg);
  font-size: 12px;
  white-space: nowrap;
  translate: -50% 50%;
}

.goals .goals-period > .kanban-add:hover {
  background: light-dark(#f4f4f5, #2a2a2d);
}

.goals .goals-period > .kanban-add svg {
  width: 12px;
  height: 12px;
}

/* The lists end where their last goal does, and leave room between them for
   the pill. */
.goals .goals-period,
.goals[data-layout="columns"] .goals-period {
  padding-bottom: 12px;
}

.goals[data-layout="rows"] .goals-periods {
  gap: 22px;
}

.goal-body {
  flex: 1;
  min-width: 0;
}

/* Each goal starts with a bullet; a starred one with a gold star, and its
   row is softly lit. */
.goal-bullet {
  display: grid;
  flex: none;
  place-items: center;
  width: 12px;
  height: 20px;
  margin-right: -2px;
}

.goal-bullet:empty::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 35%, transparent);
}

.goal-card.starred .goal-bullet {
  color: light-dark(#d99a00, #f2bf3a);
  font-size: 13px;
}

.goal-card.starred,
.goal-card.starred:hover {
  background: light-dark(rgb(242 180 30 / 0.12), rgb(242 191 58 / 0.1));
}

.goal-card.starred .goal-title {
  font-weight: 600;
}

/* A future goal: faded and in italics, its bullet an open dashed ring. */
.goal-card.draft :is(.goal-title, .goal-description) {
  opacity: 0.6;
}

.goal-card.draft .goal-title {
  font-style: italic;
}

.goal-card.draft .goal-bullet:empty::before {
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border: 1.2px dashed color-mix(in srgb, var(--fg) 55%, transparent);
  background: none;
}

.goal-card.starred::before,
.goal-card.starred + .goal-card::before {
  opacity: 0;
}

.goal-title {
  color: var(--fg);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  outline: none;
}

.goal-title[contenteditable] {
  cursor: text;
}

/* A finalized goal is settled: done in a deep green, won't do in a deep
   red, both in italics and a little faded. Starred, it keeps its star but
   not the gold or the glow. */
.goal-card.finalized[data-stage="done"] {
  --finalized: light-dark(#14532b, #4fa26d);
}

.goal-card.finalized[data-stage="dropped"] {
  --finalized: light-dark(#7a1f1a, #c4655d);
}

.goal-card.finalized :is(.goal-title, .goal-description, .item-description-field, .goal-bullet) {
  opacity: 0.72;
}

.goal-card.finalized .goal-title {
  color: var(--finalized);
  font-style: italic;
}

.goal-card.finalized :is(.goal-description, .item-description-field) {
  color: color-mix(in srgb, var(--finalized) 55%, var(--muted));
}

.goal-card.finalized .goal-bullet:empty::before {
  background: var(--finalized);
  opacity: 0.6;
}

.goal-card.finalized.starred,
.goal-card.finalized.starred:hover {
  background: none;
}

.goal-card.finalized.starred .goal-bullet {
  color: var(--finalized);
}

.goals .goal-card.finalized.starred .goal-title {
  font-weight: 500;
}

.goal-card.finalized.starred::before,
.goal-card.finalized.starred + .goal-card::before {
  opacity: 1;
}

.goal-description {
  margin-top: 3px;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The status: a small tag in the card's corner, in the status's color. */
.goal-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  margin: 1px -3px 0 0;
  padding: 2px 8px 2px 7px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stage) 16%, transparent);
  color: color-mix(in srgb, var(--stage) 55%, var(--fg));
  font: 550 11.5px/1.5 sans-serif;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.goal-status:hover {
  background: color-mix(in srgb, var(--stage) 28%, transparent);
}

.goal-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stage);
}

.goal-status-item .kanban-dot {
  margin-right: 8px;
}

.goal-status-item[aria-checked="true"] {
  font-weight: 600;
}

/* Links on tasks and goals: small tags with the site's icon and name. */
.kanban-card-meta {
  flex-wrap: wrap;
  gap: 6px;
}

.item-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal-body .item-links {
  margin-top: 6px;
}

.item-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 200px;
  padding: 2px 8px 2px 5px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: color-mix(in srgb, var(--fg) 75%, transparent);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.item-link span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-link:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg);
}

.item-link-icon {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

.item-link-form {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

.item-link-input {
  box-sizing: border-box;
  width: 280px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  outline: none;
}

.item-link-hint:empty {
  display: none;
}

.item-link-hint {
  padding: 0 4px;
  color: light-dark(#c4473a, #e0675a);
  font-size: 12px;
}

/* The zen of the notes, brought to Goals: their serif, more air, softer
   panels and lines, quieter labels. */
.goals {
  --goals-serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
}

.goals .goals-area {
  margin-top: 40px;
}

.goals .goals-area:first-child {
  margin-top: 4px;
}

.goals .goals-area-head {
  gap: 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.goals .goals-area-emoji {
  width: auto;
  height: auto;
  background: none;
  font-size: 20px;
}

.goals .goals-area-description {
  margin: 4px 0 0 30px;
  color: var(--muted);
  font-family: var(--goals-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
}

.goals .goals-periods {
  margin-top: 16px;
}

.goals .goals-period-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

/* Above the future goals, at the end of a list. */
.goals .goals-future-head {
  margin: 12px 2px 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.goals .goals-period-description {
  color: var(--muted);
  font-family: var(--goals-serif);
  font-size: 13.5px;
  font-style: italic;
}

.goals .goals-period[data-period="current"] {
  background: light-dark(rgb(0 0 0 / 0.04), rgb(255 255 255 / 0.06));
}

.goals .goals-period[data-period="yearly"] {
  box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.09), rgb(255 255 255 / 0.1));
}

.goals .goals-period.drop-target {
  box-shadow: inset 0 0 0 1.5px light-dark(rgb(0 0 0 / 0.3), rgb(255 255 255 / 0.32));
}

.goals .goal-title {
  font-family: var(--goals-serif);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.45;
}

.goals .goal-card.starred .goal-title {
  font-weight: 600;
}

.goals .goal-description,
.goals .item-description-field {
  color: var(--muted);
  font-family: var(--goals-serif);
  font-size: 13px;
  line-height: 1.5;
}

/* Typed where it shows, so the text doesn't shift when saved. */
.goals .item-description-field {
  margin-top: 3px;
}

.goals .goal-card + .goal-card::before {
  background: color-mix(in srgb, var(--fg) 5%, transparent);
}

.goals .goal-bullet {
  height: 24px;
}

/* The status: a ring around a dot in its color, opening on hover into the
   full name. */
.goals .goal-status {
  justify-content: center;
  gap: 0;
  min-width: 18px;
  height: 18px;
  margin-top: 3px;
  padding: 0 4px;
  border: 1.5px solid color-mix(in srgb, var(--stage) 55%, transparent);
  background: none;
  transition:
    gap 200ms ease,
    padding 200ms ease,
    background 200ms ease,
    border-color 200ms ease;
}

/* The ring is small, so an invisible margin around it takes the click too. */
.goals .goal-status {
  position: relative;
}

.goals .goal-status::after {
  position: absolute;
  inset: -10px -10px -10px -12px;
  content: "";
}

.goals .goal-status span {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-width 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 160ms ease;
}

.goals .goal-status:is(:hover, :focus-visible) {
  gap: 5px;
  padding: 0 8px 0 5px;
  border-color: transparent;
  background: color-mix(in srgb, var(--stage) 16%, transparent);
}

.goals .goal-status:is(:hover, :focus-visible) span {
  max-width: 120px;
  opacity: 1;
}

/* The board, with a touch of Goals' calm: New task as a pill on a lane's
   bottom edge, chevrons and New Project only on hover, softer lanes and
   cards, and more air between projects. */
.kanban .kanban-project {
  margin-top: 30px;
}

.kanban .kanban-project-head {
  gap: 10px;
  font-size: 17px;
}

.kanban .kanban-project-emoji {
  width: auto;
  height: auto;
  background: none;
  font-size: 17px;
}

.kanban .kanban-project-head svg,
.kanban > .kanban-add-project {
  opacity: 0;
  transition: opacity 180ms ease;
}

.kanban .kanban-project:hover > .kanban-project-head svg,
.kanban .kanban-project-head:focus-visible svg,
.kanban > .kanban-add-project:hover,
.kanban > .kanban-add-project:focus-visible {
  opacity: 1;
}

.kanban > .kanban-add-project::before {
  content: "";
  position: absolute;
  inset: -28px -12px -12px;
}

.kanban .kanban-lanes {
  margin-top: 10px;
}

.kanban .kanban-lane {
  position: relative;
  min-height: 44px;
  padding: 8px 8px 14px;
  background: light-dark(color-mix(in srgb, var(--stage) 5%, transparent), color-mix(in srgb, var(--stage) 8%, transparent));
}

.kanban .kanban-card {
  border-color: color-mix(in srgb, var(--stage) 14%, transparent);
  box-shadow: light-dark(0 1px 2px rgb(0 0 0 / 0.04), none);
}

.kanban .kanban-card:hover {
  border-color: color-mix(in srgb, var(--stage) 36%, transparent);
}

.kanban .kanban-lane > .kanban-add {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  gap: 4px;
  padding: 3px 11px 3px 8px;
  border-radius: 999px;
  background: light-dark(#fff, #1c1c1e);
  box-shadow:
    0 2px 10px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.5)),
    inset 0 0 0 1px light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.1));
  color: var(--fg);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 50%;
  transition: opacity 180ms ease;
}

.kanban .kanban-lane:hover > .kanban-add,
.kanban .kanban-lane > .kanban-add:focus-visible {
  opacity: 1;
}

.kanban .kanban-lane > .kanban-add:hover {
  background: light-dark(#f4f4f5, #2a2a2d);
}

.kanban .kanban-lane > .kanban-add svg {
  width: 12px;
  height: 12px;
}

.kanban-lane.drop-end::after {
  top: auto;
  bottom: 6px;
  right: 14px;
  left: 14px;
}

/* Lanes leave room below for the pill. */
.kanban .kanban-lanes {
  padding-bottom: 6px;
}

/* Formatting bubble over a selection in the notes. */
.format-bubble {
  position: fixed;
  z-index: 10;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 14px;
  background: light-dark(#1d1d1f, #f5f5f7);
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.25);
}

.format-bubble[hidden] {
  display: none;
}

.format-bubble button {
  width: 32px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: light-dark(#fff, #1d1d1f);
  font: 600 15px/1 ui-serif, "New York", Georgia, serif;
}

.format-bubble button:hover,
.format-bubble button[aria-pressed="true"] {
  background: rgb(127 127 127 / 0.3);
}

.format-bubble .format-italic {
  font-style: italic;
}

.format-bubble .format-strike {
  text-decoration: line-through;
}

.format-bubble .format-code {
  font: 600 12px/1 ui-monospace, "SF Mono", Menlo, monospace;
}

.format-bubble .format-numbered {
  font-size: 13px;
}

.format-bubble .format-heading {
  margin-left: 6px;
}

/* Legibility on the page itself: text and icons that sit straight on the
   wallpaper or a photo get a soft halo in the opposite tone of the text. */
html[data-wallpaper] {
  --legible-color: light-dark(rgb(255 255 255 / 0.55), rgb(0 0 0 / 0.4));
}

/* On a plain color or a photo, the round glass buttons and the group cards
   follow the text's tone rather than the appearance: light text gets dimmer
   glass behind it, dark text lighter glass. */
html[data-tone="dark"] {
  --legible-color: rgb(0 0 0 / 0.4);
  --glass-button: rgb(0 0 0 / 0.16);
  --glass-button-hover: rgb(0 0 0 / 0.24);
  --glass-button-on: rgb(255 255 255 / 0.3);
  --group-fill: rgb(0 0 0 / 0.16);
}

html[data-tone="light"] {
  --legible-color: rgb(255 255 255 / 0.55);
  --glass-button: rgb(255 255 255 / 0.4);
  --glass-button-hover: rgb(255 255 255 / 0.55);
  --glass-button-on: rgb(255 255 255 / 0.85);
  --group-fill: rgb(255 255 255 / 0.5);
}

/* Kept tight: titles clip their overflow, which would cut a wide glow into
   a visible box. */
.column.bare,
.side-toggle,
.mode-segment,
.new-column {
  text-shadow: 0 1px 2px var(--legible-color, transparent);
}

.column.bare :is(svg, img),
.side-toggle svg,
.mode-segment svg,
.new-column svg {
  filter: drop-shadow(0 1px 1.5px var(--legible-color, transparent));
}

/* Group cards and the notes page have their own ground. */
.notes-mode :is(.side-toggle, .mode-segment) {
  text-shadow: none;
}

.notes-mode :is(.side-toggle, .mode-segment) svg {
  filter: none;
}

/* Tab groups are frosted: they blur the page behind them. The list's fade
   mask would hide the page from them, so Open Tabs' list goes without. */
.column[data-key="openTabs"] > .list {
  mask-image: none;
}

.group-card:not(.loose)::before {
  backdrop-filter: blur(18px) saturate(160%);
}

/* Pinned tabs: frosted icon tiles above a window's groups, up to three to a
   line, stretching to share whatever line they're on. */
.pinned-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.pinned-tile {
  display: grid;
  flex: 1 1 calc((100% - 12px) / 3);
  place-items: center;
  height: 44px;
  border-radius: 16px;
  background: var(--group-fill, light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.13)));
  box-shadow: var(--glass-rim);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background-color 120ms ease;
}

.pinned-tile:hover {
  background: color-mix(in srgb, var(--fg) 18%, transparent);
}

.pinned-tile.current {
  box-shadow: var(--glass-rim), inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 45%, transparent);
}

/* In the side panel the tab you're on stands out more: frosted glass with the
   columns' rim of light, which catches color at its corners. */
.panel :is(.row, .pinned-tile).current {
  position: relative;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.14);
  backdrop-filter: blur(14px) saturate(180%);
}

.panel :is(.row, .pinned-tile).current::before {
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from 210deg,
    rgb(255 255 255 / 0.7),
    rgb(255 255 255 / 0.12) 18%,
    rgb(160 210 255 / 0.4) 30%,
    rgb(255 255 255 / 0.1) 45%,
    rgb(255 255 255 / 0.5) 55%,
    rgb(255 170 220 / 0.35) 68%,
    rgb(255 255 255 / 0.1) 82%,
    rgb(255 255 255 / 0.7)
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  content: "";
}

.pinned-tile img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.pinned-tile {
  color: inherit;
  text-decoration: none;
}

.pinned-emoji {
  font-size: 20px;
  line-height: 1;
  text-shadow: none;
}

/* A pinned tab being renamed takes its line of tiles for the name. */
.tab-rename {
  margin-bottom: 6px;
}

/* Where a dragged tab or group will land among the open tabs. */


/* Full screen, in the clock's bottom right corner while the pointer is near. */
.fullscreen-toggle {
  position: fixed;
  z-index: 4;
  right: 24px;
  bottom: 22px;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-button);
  color: var(--fg);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  opacity: 0;
  translate: 0 8px;
  pointer-events: none;
  transition:
    background-color 160ms ease,
    opacity 240ms ease,
    translate 340ms cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bookmarks-hidden .fullscreen-toggle {
  display: grid;
}

.fullscreen-peek .fullscreen-toggle,
.fullscreen-toggle:focus-visible {
  opacity: 1;
  translate: 0;
  pointer-events: auto;
}

.fullscreen-toggle:hover {
  background: var(--glass-button-hover);
}

.fullscreen-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

/* The next event: one quiet line under the greeting, its calendar's color
   as a dot. */
.clock-info {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  justify-content: center;
  max-width: 90%;
  margin-top: 16px;
}

.clock-info-break {
  flex-basis: 100%;
  height: 0;
}

.clock-info-break[hidden] {
  display: none;
}

.clock-info:not(:has(> :not([hidden], .clock-info-break))) {
  display: none;
}

.clock-event,
.clock-weather {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
  max-width: 560px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 500;
  opacity: 0.8;
  cursor: pointer;
  transition: background-color 160ms ease, opacity 160ms ease;
}

.clock-event[hidden],
.clock-weather[hidden] {
  display: none;
}

.clock-event:hover,
.clock-weather:hover {
  background: var(--glass-button);
  opacity: 1;
}

.clock-event.asking,
.clock-weather.asking {
  background: var(--glass-button);
  font-size: 13px;
  font-weight: 600;
}

.clock-event-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.5);
}

.clock-weather {
  flex: none;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.clock-weather-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.clock-event-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Now Playing: a glass card under the clock, set like the lock screen's
   music widget. */
.now-playing {
  grid-row: 6;
  display: grid;
  gap: 15px;
  width: min(425px, 90%);
  margin-top: 34px;
  padding: 19px 21px 14px;
  border-radius: 34px;
  background: var(--glass-button);
  color: var(--fg);
  text-align: left;
  text-shadow: none;
  box-shadow: var(--glass-rim), 0 12px 36px rgb(10 25 60 / 0.16);
  backdrop-filter: blur(24px) saturate(180%);
}

.now-playing {
  transition:
    scale 260ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.now-playing.leaning {
  scale: 1.015;
  transform: translate(var(--lean-x, 0), var(--lean-y, 0));
}

.now-playing[hidden] {
  display: none;
}

/* "3 Current Goals" under the clock: a small In Progress ring before it. */
.clock-goals {
  flex: none;
}

.clock-goals-ring {
  --stage: light-dark(#2f6fde, #4c8dff);
  display: grid;
  flex: none;
  place-items: center;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--stage) 60%, transparent);
  border-radius: 50%;
}

.clock-goals-ring::before {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--stage);
  content: "";
}

/* Its hover shows a goal in progress: no box of its own, just the goal in
   serif italics like a quote, and its description. */
.goals-popover {
  width: min(400px, 100vw - 24px);
  padding: 24px 32px 26px;
}

.goal-widget {
  --fg: var(--ink);
  --muted: var(--ink-muted);
  display: grid;
  gap: 8px;
  justify-items: center;
  color: var(--fg);
  text-align: center;
  animation: goal-widget-in 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

.goal-widget-title {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.35;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.goal-widget-subtitle {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--fg) 62%, transparent);
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.now-playing-top {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.now-playing-art {
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
}

/* A site's icon, when there's no cover art, sits small on a tile. */
.now-playing-art.favicon-art {
  padding: 17px;
  background: var(--glass-button-hover);
  box-shadow: none;
}

.now-playing-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.now-playing-title,
.now-playing-artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.now-playing-title {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
}

.now-playing-artist {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.now-playing-source {
  flex: none;
  align-self: flex-start;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  opacity: 0.85;
}

.now-playing-progress {
  display: grid;
  gap: 6px;
}

.now-playing-bar {
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 22%, transparent);
}

.now-playing-bar span {
  display: block;
  width: var(--progress);
  height: 100%;
  background: color-mix(in srgb, var(--fg) 85%, transparent);
  transition: width 1s linear;
}

.now-playing-times {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.now-playing-controls {
  display: flex;
  gap: 41px;
  justify-content: center;
  align-items: center;
}

.now-playing-controls button {
  display: grid;
  place-items: center;
  width: 52px;
  height: 47px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: none;
  color: var(--fg);
  transition: background-color 120ms ease, scale 120ms ease;
}

.now-playing-controls button:hover {
  background: var(--glass-button-hover);
}

.now-playing-controls button:active {
  scale: 0.9;
}

.now-playing-controls svg {
  width: 32px;
  height: 32px;
  fill: currentColor;
}

.now-playing-controls .media-toggle svg {
  width: 40px;
  height: 40px;
}

.now-playing-allow {
  height: 38px;
  border: 0;
  border-radius: 19px;
  background: var(--glass-button-hover);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
}

/* Adding several bookmarks: a box of links, counted as they're pasted. */
.add-form textarea {
  height: auto;
  min-height: 132px;
  padding: 9px 10px;
  line-height: 1.45;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
}

.bookmark-dialog:has(.add-many) {
  width: min(460px, 100vw - 32px);
}

.add-many-label {
  display: flex;
  justify-content: space-between;
}

.add-many-count {
  font-variant-numeric: tabular-nums;
}

.add-many input[hidden] {
  display: none;
}

.add-form .add-actions button:disabled {
  opacity: 0.5;
}

/* The cover art as the background, filling the window, dimmed a little at
   the edges so the clock stays readable; the page's text turns light. */
.art-backdrop {
  position: fixed;
  z-index: -1;
  /* Reaches past the window so the blur doesn't fade its edges in. */
  inset: -48px;
  background: center / cover no-repeat;
  filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

.art-backdrop::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0.26), rgb(0 0 0 / 0.55));
  content: "";
}

.art-backdrop.shown {
  opacity: 1;
}

html:has(> body.art-backdrop-on) {
  --fg: #fff;
  --muted: rgb(255 255 255 / 0.7);
  --hover: rgb(255 255 255 / 0.14);
  --legible-color: rgb(0 0 0 / 0.4);
  --glass-button: rgb(255 255 255 / 0.16);
  --glass-button-hover: rgb(255 255 255 / 0.26);
  --glass-button-on: rgb(255 255 255 / 0.32);
}

.now-playing-art.can-fill {
  cursor: pointer;
  transition: scale 160ms ease;
}

.now-playing-art.can-fill:hover {
  scale: 1.04;
}

/* The side panel's mini player: one glass line above the open tabs. */
.mini-player {
  display: flex;
  gap: 10px;
  align-items: center;
  height: 52px;
  margin: 0 0 10px;
  padding: 0 6px 0 8px;
  border-radius: 16px;
  background: var(--group-fill, light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.13)));
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(18px) saturate(160%);
  color: var(--fg);
  cursor: default;
  transition: background-color 120ms ease;
}

.mini-player[hidden] {
  display: none;
}

.mini-player:hover {
  background: color-mix(in srgb, var(--fg) 18%, transparent);
}

.mini-art {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.18);
}

.mini-art.favicon-art {
  padding: 9px;
  background: var(--glass-button-hover);
  box-shadow: none;
}

.mini-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.mini-title,
.mini-artist {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mini-title {
  font-weight: 600;
}

.mini-artist {
  color: var(--muted);
  font-size: 12px;
}

.mini-toggle {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fg);
}

.mini-toggle[hidden] {
  display: none;
}

.mini-toggle:hover {
  background: var(--hover);
}

.mini-toggle svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Bookmark search: the Siri bar's long rounded shape, in the same glass as
   the bookmark pills. */
.search {
  position: relative;
  z-index: 5;
  flex: none;
  width: min(560px, 100vw - 300px);
  margin: 48px auto 0;
}

.search + #dock {
  margin-top: 18px;
}

/* Without the pills, the search bar sits alone above the columns, with the
   same space above and below it. */
.search:has(+ #dock[hidden]) {
  margin-top: 64px;
}

.search ~ #dock[hidden] + #board {
  padding-top: 64px;
}

/* The pills sit closer to the columns under them. */
.search ~ #dock:not([hidden]) + #board {
  padding-top: 28px;
}

.bookmarks-hidden .search,
.notes-mode .search,
.videos-mode .search,
.full-screen .search {
  display: none;
}

.search-pill {
  border-radius: 28px;
}

.search-input {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: var(--glass-button);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  color: var(--fg);
  caret-color: var(--fg);
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.search-input:hover {
  background: var(--glass-button-hover, var(--glass-button));
}

.search-input:focus {
  background: var(--glass-button-hover, var(--glass-button));
  box-shadow:
    var(--glass-rim),
    inset 0 0 0 1.5px color-mix(in srgb, var(--fg) 30%, transparent),
    0 6px 20px rgb(10 25 60 / 0.14);
}

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

.search-input::selection {
  background: color-mix(in srgb, var(--fg) 25%, transparent);
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: min(420px, 60vh);
  padding: 6px;
  overflow-y: auto;
  border-radius: 22px;
  /* The page's text color decides the text here, so the glass takes the
     opposite tone: dark under light text, light under dark text. */
  background: oklch(from var(--fg) calc(1 - l) 0 h / 0.82);
  box-shadow: var(--glass-rim), 0 12px 32px rgb(10 25 60 / 0.16);
  backdrop-filter: blur(24px) saturate(180%);
  color: var(--fg);
  scrollbar-width: none;
}

.search-results[hidden] {
  display: none;
}

.search-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.search-row.selected {
  background: var(--hover);
}

.search-row .favicon {
  flex: none;
  width: 16px;
  height: 16px;
}

.search-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-row-detail {
  flex: none;
  max-width: 40%;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-open-url .search-row-title {
  font-weight: 600;
}

.search-empty {
  padding: 13px 14px;
  color: var(--muted);
}

.add[hidden] {
  display: none;
}

/* Side panel: search at the bottom, beside a round button for the full app.
   The columns' lists leave room for it; results open upward. */
.panel-footer {
  position: fixed;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 12px 12px;
}

.panel-footer::before {
  position: absolute;
  z-index: -1;
  inset: -28px 0 0;
  backdrop-filter: blur(14px) saturate(160%);
  mask-image: linear-gradient(transparent, #000 50%);
  pointer-events: none;
  content: "";
}

.panel .column > .list {
  padding-bottom: 76px;
  scroll-padding-bottom: 76px;
}

/* The mini player sits in the footer, a row above the search bar, and the
   lists leave room for it too. */
.panel-footer {
  flex-wrap: wrap;
}

.panel-footer .mini-player {
  flex: 1 0 100%;
  margin: 0;
}

.panel body.mini-playing .column > .list {
  padding-bottom: 136px;
  scroll-padding-bottom: 136px;
}

.panel-footer .search {
  flex: 1;
  width: auto;
  min-width: 0;
  margin: 0;
}

.panel-footer .search-pill {
  border-radius: 22px;
}

.panel-footer .search-input {
  height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.panel-footer .search-results {
  top: auto;
  bottom: calc(100% + 8px);
  max-height: min(360px, 60vh);
}

.open-app {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-button);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  color: var(--fg);
  transition: background-color 120ms ease;
}

/* The extension's dot, drawn like the other buttons' icons: in their color
   and weight, with a faint sheen across the top. */
.open-app-orb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background:
    linear-gradient(170deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 55%),
    currentColor;
  opacity: 0.85;
  transition: scale 160ms ease;
}

.open-app:hover .open-app-orb {
  scale: 1.08;
}

/* What's under the pointer while the page is dragged from the bookmark
   button: a card with its favicon and title. Kept out of sight until Chrome
   takes its picture; the padding leaves room for the shadow. */
.drag-ghost {
  position: fixed;
  top: -200px;
  left: 0;
  padding: 16px 18px 22px;
  pointer-events: none;
}

.drag-ghost-card {
  display: flex;
  gap: 9px;
  align-items: center;
  max-width: 240px;
  height: 36px;
  padding: 0 14px 0 11px;
  border-radius: 12px;
  background: light-dark(rgb(255 255 255 / 0.96), rgb(52 54 60 / 0.96));
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.12),
    0 2px 4px rgb(10 25 60 / 0.12),
    0 8px 20px rgb(10 25 60 / 0.22);
}

.drag-ghost-card .favicon {
  flex: none;
  width: 16px;
  height: 16px;
}

.drag-ghost-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Saving the page: filled while it's in the space's folder. */
.save-page.saved svg {
  fill: currentColor;
}

.save-page:disabled {
  opacity: 0.45;
}

.menu-title {
  margin: 4px 10px 6px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.open-app:hover {
  background: var(--glass-button-hover, var(--glass-button));
}

.open-app svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

/* The side lists' titles sit a little higher, and the bookmark columns step
   down under a "Folders" title at the same height and in the same style. The
   page's own text colors are kept here, since a column repaints its own. */
html {
  --page-muted: var(--muted);
  --page-legible: var(--legible-color, transparent);
}

/* A shorter heading keeps the title at the same height while the list
   comes up closer under it. */
html:not(.panel) .column.side.bare {
  margin-top: -8px;
}

html:not(.panel) .column.side.bare > .head {
  height: 38px;
}

html:not(.panel) #board > .column:not(.side) {
  margin-top: 40px;
}

.folders-label {
  position: relative;
  flex: none;
  width: 0;
  /* Takes no room: the board's gap after it is given back. */
  margin-right: calc(var(--column-gap) * -1);
}

.folders-label > span {
  position: absolute;
  top: -16px;
  left: 0;
  display: flex;
  align-items: center;
  height: 54px;
  padding-left: 22px;
  color: var(--page-muted);
  font-weight: 600;
  text-shadow: 0 1px 2px var(--page-legible);
  white-space: nowrap;
  pointer-events: none;
}

.panel .folders-label,
.bookmarks-hidden .folders-label,
.notes-mode .folders-label,
.videos-mode .folders-label {
  display: none;
}

/* Open Tabs is a little wider than the other columns, growing to the right. */
html:not(.panel) .column.side[data-key="openTabs"]:not(.collapsed) {
  flex-basis: calc(var(--column-width) + 8px);
}

html:not(.panel) .column.side[data-key="openTabs"] > * {
  min-width: calc(var(--column-width) + 8px);
}

/* A folded column is a slim strip with its name running down it, so it
   takes little room across; its chevron, on hover, unfolds it. */
.column.folded {
  flex-basis: auto;
  align-self: flex-start;
}

.column.folded > :not(.head) {
  display: none;
}

.column.folded > .head,
html:not(.panel) .column.folded:not(.side):not(.tile) > .head {
  flex-direction: column;
  width: 54px;
  height: auto;
  padding: 16px 0 8px;
}

/* Only the name runs down the strip, up to a limit. */
.column.folded > .head .head-title {
  flex: none;
  max-height: 50vh;
  writing-mode: vertical-rl;
}

.column.folded > .head :is(.column-expand, .head-actions) {
  display: none;
}

.column.folded > .head .column-fold {
  margin: 4px 0 0;
}

/* A box folding or unfolding (see morphTransition) reshapes smoothly: its
   content isn't stretched, only shown through the changing box. */
::view-transition-group(*.morph) {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-image-pair(*.morph) {
  overflow: hidden;
  border-radius: 16px;
}

::view-transition-old(*.morph),
::view-transition-new(*.morph) {
  width: auto;
  height: auto;
  object-fit: none;
  object-position: left top;
  animation-duration: 240ms;
}

/* The fold chevron: only on hover, pointing up while open, as a group's. */
.column-fold {
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

.column > .head:hover > .column-fold,
.column-fold:focus-visible {
  opacity: 1;
}

.column-fold:hover {
  background: var(--hover);
  color: var(--fg);
}

.column-fold[aria-expanded="true"] {
  rotate: 180deg;
}

/* Expand sits right of the fold chevron and shows with it, on hover; on an
   expanded column it stays, as the way back. */
.column-expand {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  opacity: 0;
  transition: opacity 120ms ease;
}

.column > .head:hover > .column-expand,
.column-expand:focus-visible,
.column.expanded .column-expand {
  opacity: 1;
}

.column-expand:hover {
  background: var(--hover);
  color: var(--fg);
}

.column-expand svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

/* In the app the color is changed from the column's menu; the brush stays,
   out of sight, for it to press. */
html:not(.panel) .head-actions > .brush {
  display: none;
}

/* A color picker opened from a menu sits where the menu was. */
.picker.floating {
  position: fixed;
  z-index: 20;
  top: 0;
  right: auto;
}

/* With the clock or notes showing, only the view switch stays on the left,
   centered on the window's height: the side list buttons and the divider go. */
:is(.bookmarks-hidden, .notes-mode, .videos-mode) .side-toggles > :not(.mode-switch) {
  display: none;
}

/* The close button takes no room: titles use the row's full width, and on
   hover the × sits over the end of the title, which fades out under it. */
.row:has(> .tab-close) {
  position: relative;
}

.row > .tab-close {
  position: absolute;
  top: 50%;
  right: 8px;
  margin: 0;
  translate: 0 -50%;
}

/* The title fills the row, so the fade sits under the × at the row's end
   rather than at the end of a short title. */
.row:has(> .tab-close) > .row-title {
  flex: 1;
}

.row:has(> .tab-close):is(:hover, :focus-within) > .row-title {
  mask-image: linear-gradient(to left, transparent 22px, #000 52px);
}

/* Open tabs lift and lean toward the pointer a little, as the pills do. */
:is(.group-tabs-inner > .row, .pinned-tile) {
  transition:
    scale 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 120ms ease;
}

:is(.group-tabs-inner > .row, .pinned-tile).leaning {
  z-index: 1;
  scale: 1.02;
  transform: translate(var(--lean-x, 0), var(--lean-y, 0));
}

/* Short windows: the search bar and pills shrink and sit tighter, leaving the
   columns more room. */
@media (max-height: 860px) {
  .search {
    margin-top: 22px;
  }

  .search-pill {
    border-radius: 22px;
  }

  .search-input {
    height: 44px;
    padding: 0 22px;
    font-size: 15px;
  }

  .search + #dock {
    margin-top: 10px;
  }

  #dock {
    gap: 8px;
    min-height: 60px;
    max-height: 108px;
  }

  .pill {
    gap: 8px;
    height: 40px;
    padding: 0 14px 0 10px;
    border-radius: 20px;
  }

  .pill:not(:has(.pill-title), .editing) {
    width: 40px;
  }

  .pill img {
    width: 20px;
    height: 20px;
  }

  .search ~ #dock:not([hidden]) + #board {
    padding-top: 20px;
  }
}

/* An expanded column takes over the folders area: the same glass column,
   stretched to the full width. */
html:not(.panel) .column.expanded {
  flex: 1 0 var(--column-width);
}

/* While a column is expanded, the Folders title leads back to all of them. */
.folders-label .folders-back {
  display: flex;
  gap: 2px;
  align-items: center;
  margin-left: -6px;
  padding: 4px 8px 4px 2px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  text-shadow: inherit;
  pointer-events: auto;
}

.folders-label .folders-back:hover {
  background: var(--glass-button);
}

.folders-back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
  rotate: 90deg;
}

/* An expanded column browses like a Finder window in column view: three
   equal panes, hairlines between them. */
.browser {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.pane + .pane {
  border-left: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
}

/* A folder in a pane opens in the next one, with a chevron saying so. */
.browser-chevron {
  display: grid;
  flex: none;
  place-items: center;
  margin-left: auto;
  color: var(--muted);
}

.browser-chevron svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.row.browser-folder.selected {
  background: color-mix(in srgb, var(--fg) 16%, transparent);
}

/* The path after "‹ Folders": each folder a way back to its level. */
.folders-trail {
  gap: 2px;
}

.folders-crumb {
  max-width: 220px;
  padding: 4px 8px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  text-shadow: inherit;
  white-space: nowrap;
  pointer-events: auto;
}

.folders-crumb:hover {
  background: var(--glass-button);
}

.folders-crumb[aria-current] {
  color: var(--fg);
}

.folders-crumb-separator {
  opacity: 0.5;
}

/* Columns or titles: a small switch beside the Folders title. */
.folders-view {
  display: flex;
  gap: 2px;
  margin-left: 10px;
  opacity: 0;
  transition: opacity 160ms ease;
  padding: 2px;
  border-radius: 999px;
  background: var(--glass-button);
  box-shadow: var(--glass-rim);
  backdrop-filter: blur(14px) saturate(180%);
  pointer-events: auto;
}

/* It shows while the pointer is on the Folders title, or the switch has focus. */
.folders-label > span:has(> .folders-view) {
  padding-right: 8px;
  pointer-events: auto;
}

.folders-label > span:hover > .folders-view,
.folders-view:focus-within {
  opacity: 1;
}

.folders-view-segment {
  display: grid;
  place-items: center;
  width: 30px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  opacity: 0.6;
  transition: background-color 200ms ease, opacity 200ms ease;
}

.folders-view-segment:hover {
  opacity: 1;
}

.folders-view-segment[aria-checked="true"] {
  background: var(--glass-button-on);
  box-shadow: var(--glass-rim), 0 1px 4px rgb(10 25 60 / 0.12);
  opacity: 1;
}

.folders-view-segment svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

/* Titles: every folder as a tile, like a folded column but bigger, wrapping
   from the top center. A tile opens its folder expanded. */
.folder-tiles {
  display: flex;
  flex: 1 0 var(--column-width);
  flex-wrap: wrap;
  gap: 18px;
  align-content: flex-start;
  justify-content: center;
  min-width: 0;
  margin-top: 40px;
  padding: 4px 4px 24px;
  overflow-y: auto;
  scrollbar-width: none;
}

/* As wide as its title, within limits. */
.column.tile {
  flex: 0 0 auto;
  width: auto;
  min-width: 100px;
  max-width: 340px;
  cursor: pointer;
}

.column.tile .head {
  gap: 12px;
  height: 72px;
  padding: 0 30px 0 26px;
  color: var(--fg);
  font-size: 16px;
}

.column.tile .head-title {
  flex: 0 1 auto;
}

.column.tile .head-icon {
  width: 22px;
  font-size: 21px;
}

.column.tile .head-dot {
  width: 12px;
  height: 12px;
}

.column.tile:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* Nothing to show there, and it would add a gap after the title. */
.column.tile .head-actions {
  display: none;
}

/* Pop-overs from the chips under the clock (upcoming events, the forecast):
   glass like the menus. */
.clock-popover {
  position: fixed;
  z-index: 10;
  display: grid;
  width: min(340px, 100vw - 24px);
  padding: 6px;
  border-radius: 18px;
  background: var(--glass-surface);
  color: var(--ink);
  font-size: 13px;
  text-shadow: none;
  box-shadow: var(--glass-rim), 0 16px 48px rgb(10 25 60 / 0.22);
  backdrop-filter: blur(28px) saturate(180%);
}

.events-list {
  display: grid;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  scrollbar-width: none;
}

.events-day {
  margin: 8px 10px 4px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.events-day:first-child {
  margin-top: 4px;
}

.events-item {
  display: grid;
  grid-template-columns: 8px auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.events-item:is(:hover, :focus-visible),
.popover-action:is(:hover, :focus-visible) {
  background: var(--fill);
}

.events-time {
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.events-item.now .events-time {
  color: inherit;
  font-weight: 600;
}

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

.events-empty {
  margin: 10px;
  color: var(--ink-muted);
}

.popover-footer {
  display: flex;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

.popover-action {
  flex: 1;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: center;
}

/* Items due from the board: the dot orange for today, red once any is late. */
.clock-due {
  flex: none;
}

.due-dot {
  background: light-dark(#e07000, #ffa04d);
}

.due-dot.overdue {
  background: light-dark(#d1242f, #ff6b6b);
}

.due-item {
  grid-template-columns: 8px minmax(0, 1fr) auto;
}

/* The task a click in the list went to, marked for a moment on the board. */
.kanban-card.due-found {
  outline: 2px solid color-mix(in srgb, var(--ink) 45%, transparent);
  outline-offset: 2px;
  transition: outline-color 600ms ease;
}

/* A tab's preview is no wider than its column. Narrow, an event's title gets
   its own line, above its time. */
.tab-preview {
  container-type: inline-size;
}

@container (max-width: 340px) {
  .tab-preview .events-item {
    grid-template-columns: 8px minmax(0, 1fr);
    row-gap: 1px;
  }

  .tab-preview .events-title {
    grid-row: 1;
    grid-column: 2;
  }

  .tab-preview .events-time {
    grid-column: 2;
    font-size: 12px;
  }
}

/* A pinned Gmail tab's preview: the inbox's latest mail, unread in bold. */
.mail-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 10px 6px;
}

.mail-head-title {
  font-weight: 600;
}

.mail-head-count {
  color: var(--ink-muted);
  font-size: 12px;
}

.mail-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1px 10px;
  padding: 7px 10px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.mail-item:is(:hover, :focus-visible) {
  background: var(--fill);
}

.mail-from,
.mail-subject,
.mail-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-time {
  color: var(--ink-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.mail-subject,
.mail-snippet {
  grid-column: 1 / -1;
}

.mail-snippet {
  color: var(--ink-muted);
  font-size: 12px;
}

.mail-item.unread :is(.mail-from, .mail-subject) {
  font-weight: 600;
}

.mail-item.unread .mail-time {
  color: inherit;
  font-weight: 600;
}

/* The forecast: now, then the next days. */
.weather-popover {
  width: min(320px, 100vw - 24px);
}

.weather-header {
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 12px 6px;
}

.weather-place {
  font-size: 15px;
  font-weight: 600;
}

.weather-now {
  color: var(--ink-muted);
}

.weather-icon {
  display: grid;
  place-items: center;
}

.weather-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.weather-days {
  display: grid;
  padding: 4px 0;
}

.weather-day {
  display: grid;
  grid-template-columns: 48px 22px 32px minmax(60px, 1fr) 32px;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
}

.weather-low {
  color: var(--ink-muted);
  text-align: right;
}

.weather-high {
  font-weight: 500;
}

/* Each day's range on the week's scale, cool to warm. */
.weather-bar {
  position: relative;
  height: 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.weather-bar-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ac8fa, #ffcc4d, #ff9f43);
}

/* Bookmark columns: the first row comes up closer under the title. The
   heading is shorter at the bottom only, so the title stays where it was. */
html:not(.panel) .column:not(.side):not(.tile) > .head {
  height: 46px;
  margin-top: 4px;
}

html:not(.panel) .column:not(.side) > .list {
  padding-top: 0;
}

/* Watch Later: the player large on the left, the list in a glass column on
   the right, over the page's own background. */

.videos-page {
  display: none;
}

.videos-mode #dock,
.videos-mode #board > .column,
.videos-mode .folder-tiles,
.videos-mode .board-end {
  display: none;
}

.videos-mode #board {
  padding-bottom: 0;
}

.videos-mode .videos-page {
  display: flex;
  flex: 1;
  gap: 24px;
  min-width: 0;
  height: calc(100vh - var(--board-top, 0px) - 28px);
  margin-left: 12px;
  padding-right: 12px;
}

.videos-page[data-state]:not([data-state="ready"]) {
  align-items: center;
  justify-content: center;
}

.video-stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 0;
}

/* As big as fits, at 16:9, or smaller at the small size. */
.videos-page {
  --video-fit: calc((100vh - var(--board-top, 0px) - 150px) * 16 / 9);
  --video-scale: 1;
}

.videos-page[data-size="small"] {
  --video-scale: 0.6;
}

/* The list hidden, the buttons on the left stay out of sight until the
   pointer comes near the left edge, as in clock mode. They stay in the
   layout, so the player doesn't move when they show. */
.videos-mode #board > .side-toggles {
  transition: translate 340ms cubic-bezier(0.2, 0.8, 0.2, 1);

  & > * {
    transition:
      opacity 240ms ease,
      background-color 160ms ease;
  }
}

.videos-mode:not(.rail-peek) #board:has(.videos-page.list-hidden) > .side-toggles:not(:has(:focus-visible)) {
  translate: -14px -50%;
  pointer-events: none;

  & > * {
    opacity: 0;
  }
}

/* And with the pointer resting, the title, the controls and the list's
   button fade out, and the cursor with them. */
.video-info,
.video-list-toggle {
  transition:
    width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 400ms ease;
}

.videos-idle .videos-page.list-hidden :is(.video-info, .video-list-toggle) {
  opacity: 0;
  pointer-events: none;
}

.videos-idle .videos-page.list-hidden {
  cursor: none;
}

.video-frame {
  position: relative;
}

/* Over the player while the controls are hidden, to hear the pointer move. */
.video-wake {
  position: absolute;
  inset: 0;
  display: none;
  cursor: none;
}

.videos-idle .videos-page.list-hidden .video-wake {
  display: block;
}

/* The list hidden: it folds away into its corner, its glass fading out,
   until only the button that shows it again is left, where it was. The
   player takes the room. Its content keeps its width, pinned to the right,
   so the list slides out of view rather than reflowing. The space left is
   tall enough not to clip the button's shadow. */
.videos-page.list-hidden .video-queue {
  width: 64px;
  height: 72px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.videos-page.list-hidden :is(.video-queue-head > div, .video-search-toggle, .video-search, .video-list) {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 160ms ease,
    visibility 0s 320ms;
}

.videos-page.list-hidden .video-queue-head {
  padding-top: 16px;
}

.video-frame {
  width: calc(min(100%, var(--video-fit)) * var(--video-scale));
  transition: width 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 22px;
  background: #000;
  box-shadow: var(--glass-rim), var(--glass-shadow);
}

.video-blocked {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  height: 100%;
  padding: 32px;
  color: #fff;
  text-align: center;
}

.video-blocked .videos-message-detail {
  max-width: 380px;
  color: rgb(255 255 255 / 0.65);
}

.video-blocked .videos-button {
  margin-top: 8px;
}

.video-player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-info {
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(min(100%, var(--video-fit)) * var(--video-scale));
  margin: 0 auto;
  padding: 0 6px;
  color: var(--fg);
}

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

.video-title {
  margin: 0;
  overflow: hidden;
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px var(--legible-color, transparent);
}

.video-channel {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.video-note {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.video-controls {
  display: flex;
  flex: none;
  gap: 8px;
}

.video-control {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-button);
  color: var(--fg);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
  cursor: pointer;
}

.video-control:hover:not(:disabled) {
  background: var(--glass-button-hover);
}

.video-control[aria-pressed="true"] {
  background: var(--glass-button-on);
}

.video-control:disabled {
  opacity: 0.4;
  cursor: default;
}

.video-control svg,
.videos-message-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

:is(.video-control, .videos-message-icon, .mode-segment, .menu .with-icon) .solid {
  fill: currentColor;
  stroke: none;
}

.video-control.small {
  width: 32px;
  height: 32px;
  flex: none;
}

.video-control.small svg {
  width: 17px;
  height: 17px;
}


@keyframes video-spin {
  to {
    rotate: 360deg;
  }
}

.video-queue {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-start;
  width: var(--queue-width);
  height: calc(100% - 24px);
  min-height: 0;
  margin: 12px 0;
  transition:
    width 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    height 320ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 240ms ease,
    box-shadow 240ms ease,
    backdrop-filter 240ms ease;
  overflow: hidden;
  border-radius: 28px;
  background: var(--glass-surface);
  color: var(--ink, var(--fg));
  box-shadow: var(--glass-rim), var(--glass-shadow);
  backdrop-filter: blur(30px) saturate(180%);
}

.videos-page {
  --queue-width: clamp(300px, 26vw, 400px);
}

.video-queue > * {
  flex-shrink: 0;
  width: var(--queue-width);
}

.video-queue > .video-list {
  flex-shrink: 1;
}

.video-queue-head > div,
.video-search-toggle,
.video-list {
  transition:
    opacity 220ms ease 100ms,
    visibility 0s;
}

/* The search field opens by growing out from under the header. */
.video-search {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transition:
    grid-template-rows 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 200ms ease,
    visibility 0s 280ms;
}

.video-search > div {
  min-height: 0;
  overflow: hidden;
}

.video-queue.searching .video-search {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.video-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 12px 8px;
  padding: 7px 10px;
  border-radius: 12px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  cursor: text;
}

.video-search-box svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.6;
  opacity: 0.55;
}

.video-search-box input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
}

/* Escape clears it, so no clear button of Chrome's own. */
.video-search-box input::-webkit-search-cancel-button {
  appearance: none;
}

/* Rows a search leaves out, and messages not needed, whatever their display. */
.video-list > li[hidden] {
  display: none;
}

.video-search-toggle[aria-expanded="true"] {
  background: var(--glass-button-on);
}

.video-queue-head {
  transition: padding-top 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 10px 20px;
}

.video-queue-head > div {
  flex: 1;
  min-width: 0;
}

.video-queue-title {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
}

/* The list's name, a button opening the menu of lists. */
.video-list-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  margin: -3px 0 -3px -8px;
  padding: 3px 6px 3px 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.video-list-emoji {
  flex: none;
  margin-right: 4px;
}

.video-list-picker .video-list-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-list-picker:hover,
.video-list-picker[aria-expanded="true"] {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.video-list-picker svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  opacity: 0.6;
  transition: rotate 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-list-picker[aria-expanded="true"] svg {
  rotate: 180deg;
}

/* The menu of lists drops from the name. */
.video-list-menu {
  transform-origin: top left;
  animation: video-list-menu-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes video-list-menu-in {
  from {
    opacity: 0;
    scale: 0.96;
    translate: 0 -4px;
  }
}

.video-list-menu .video-list-current {
  font-weight: 650;
}

.video-list-menu .video-list-current::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: currentColor;
}

/* Loading, failing or empty, in the list. */
.video-queue-message {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 40px 12px;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 13px;
  text-align: center;
  animation: video-row-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.video-queue-message p {
  margin: 0;
}

/* A list switched to comes in. */
.video-list.arriving {
  animation: video-row-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.video-list {
  flex: 1;
  margin: 0;
  padding: 2px 8px 12px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.video-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  padding: 6px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.video-row:hover {
  background: color-mix(in srgb, currentColor 7%, transparent);
}

.video-row.current {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.video-row.watched:not(.current) {
  opacity: 0.5;
}

.video-watched-mark {
  position: absolute;
  top: 5px;
  left: 5px;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.7);
  color: #fff;
}

.video-row.watched .video-watched-mark {
  display: grid;
}

.video-watched-mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.video-control[aria-pressed="true"] svg {
  stroke-width: 2.5;
}

.video-thumb {
  position: relative;
  flex: none;
  width: 128px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 9px;
  background: color-mix(in srgb, currentColor 10%, transparent);
}

.video-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-length {
  position: absolute;
  right: 5px;
  bottom: 6px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.video-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgb(255 255 255 / 0.35);
}

.video-progress:not(:has(> span[style])) {
  display: none;
}

.video-progress > span {
  display: block;
  height: 100%;
  background: #f03;
}

/* The video playing shows a small equalizer over its thumbnail. */
.video-row.current .video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.35) no-repeat center / 22px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M7 4.8v10.4a.8.8 0 0 0 1.2.7l8.3-5.2a.8.8 0 0 0 0-1.4L8.2 4.1a.8.8 0 0 0-1.2.7z'/%3E%3C/svg%3E");
}

.playing .video-row.current .video-thumb::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Crect x='5' y='4' width='3.4' height='12' rx='1'/%3E%3Crect x='11.6' y='4' width='3.4' height='12' rx='1'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity 160ms;
}

.playing .video-row.current:hover .video-thumb::after {
  opacity: 1;
}

.video-row-text {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-top: 1px;
}

.video-row-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 560;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.video-row-channel {
  overflow: hidden;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-more {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 6px 4px;
  font-size: 12.5px;
  text-align: center;
}

.video-more p {
  margin: 0;
  color: color-mix(in srgb, currentColor 60%, transparent);
}

.video-more a {
  color: inherit;
}

.video-size {
  position: relative;
  display: flex;
  flex: none;
  gap: 2px;
  height: 40px;
  padding: 4px;
  border-radius: 20px;
  background: var(--glass-button);
  box-shadow: var(--glass-rim), 0 4px 14px rgb(10 25 60 / 0.1);
  backdrop-filter: blur(14px) saturate(180%);
}

/* The thumb behind the chosen size. */
.video-size::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: var(--glass-button-on);
  translate: calc(var(--at, 1) * 34px) 0;
  transition: translate 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.video-size button {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  color: var(--fg);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.video-size button:hover,
.video-size button[aria-pressed="true"] {
  opacity: 1;
}

.video-size button:hover:not([aria-pressed="true"]) {
  background: var(--glass-button-hover);
}

.video-size svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.video-size .solid {
  fill: currentColor;
  stroke: none;
}

/* Rows Load More added come in from below. */
.video-row.arriving {
  animation: video-row-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes video-row-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-frame,
  .video-info,
  .video-queue,
  .video-info,
  .video-list-toggle,
  .videos-mode #board > .side-toggles,
  .video-queue-head,
  .video-queue-head > div,
  .video-search-toggle,
  .video-search,
  .video-list,
  .video-size::before {
    transition: none;
  }

  .video-row.arriving,
  .video-list.arriving,
  .video-queue-message,
  .video-list-menu {
    animation: none;
  }
}

.videos-message {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 400px;
  padding: 36px 40px 32px;
  border-radius: var(--glass-radius);
  background: var(--glass-surface);
  color: var(--ink, var(--fg));
  text-align: center;
  box-shadow: var(--glass-rim), var(--glass-shadow);
  backdrop-filter: blur(30px) saturate(180%);
}

.videos-message-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 18px;
  background: #f03;
  color: #fff;
}

.videos-message-icon svg {
  width: 28px;
  height: 28px;
}

.videos-message-title {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
}

p.videos-message-title {
  font-size: 15px;
  font-weight: 500;
}

.videos-message-detail {
  margin: 0;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 14px;
  line-height: 1.45;
}

.videos-message-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.videos-message-actions:empty {
  display: none;
}

.videos-button {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.videos-button.primary {
  background: #f03;
  color: #fff;
}

.videos-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid color-mix(in srgb, currentColor 18%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: video-spin 800ms linear infinite;
}

/* Backing up bookmarks, under Cloud Sync's buttons: the words, then the
   switch. */
.cloud-bookmarks {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--settings-hairline, var(--line));
}

.cloud-bookmarks .settings-row-text {
  flex: 1;
}