.nav-sticker {
  position: relative;
  display: grid;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d6e2f5;
  border-radius: 12px;
  color: #0f172a;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.nav-sticker[data-selected] {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px #2563eb;
}
.nav-tile-wall {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.25rem, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.nav-sticker-wall.is-reordering,
.nav-sticker-wall.is-reordering .nav-sticker-link {
  touch-action: none;
}
.nav-sticker-item {
  min-width: 0;
}
.nav-sticker-item.is-dragging {
  opacity: 0.35;
}
.nav-sticker-link,
.nav-sticker-link * {
  -webkit-user-drag: none;
}
/* Where the sticker will land: the edge of its neighbour, on the side it goes in. */
.nav-sticker-item[data-drop='before'] .nav-sticker,
html[dir='rtl'] .nav-sticker-item[data-drop='after'] .nav-sticker {
  box-shadow: inset 3px 0 0 #2563eb;
}
.nav-sticker-item[data-drop='after'] .nav-sticker,
html[dir='rtl'] .nav-sticker-item[data-drop='before'] .nav-sticker {
  box-shadow: inset -3px 0 0 #2563eb;
}
/* What the drop will do, on the cursor. The wall holds the pointer while a sticker is in the air. */
.nav-sticker-wall.is-reordering,
.nav-sticker-wall.is-reordering .nav-sticker-link {
  cursor: grabbing;
}
.nav-sticker-wall[data-drag-mode='move'],
.nav-sticker-wall[data-drag-mode='move'] .nav-sticker-link {
  cursor: move;
}
.nav-sticker-wall[data-drag-mode='copy'],
.nav-sticker-wall[data-drag-mode='copy'] .nav-sticker-link,
.nav-sticker-wall[data-drag-mode='restore'],
.nav-sticker-wall[data-drag-mode='restore'] .nav-sticker-link {
  cursor: copy;
}
.nav-sticker-wall[data-drag-mode='none'],
.nav-sticker-wall[data-drag-mode='none'] .nav-sticker-link {
  cursor: not-allowed;
}
/* The section a sticker from another section is about to go into. */
.nav-sticker-section[data-drop-into] {
  outline: 2px dashed #2563eb;
  outline-offset: 2px;
  border-radius: 12px;
}
.nav-sticker-section[data-drop-into='copy'],
.nav-sticker-section[data-drop-into='restore'] {
  outline-color: #16a34a;
}
.nav-sticker-section[data-drop-into='block'] {
  outline-color: #dc2626;
}
/* While a sticker is dragged: the place to drop it to block the site, docked in a bottom
 * corner of the window so no wall moves under the pointer. Blocked sites are on no wall, so
 * this is the only thing a block can be dropped on. It stays narrow: the rest of the bottom
 * edge is where a held sticker scrolls the page down.
 */
.nav-sticker-blocked-dock {
  position: fixed;
  z-index: 60;
  bottom: 0.75rem;
  inset-inline-end: 0.75rem;
  width: min(15rem, 55vw);
  min-height: 4.5rem;
  margin: 0;
  padding: 0.75rem 1rem;
  display: grid;
  align-content: center;
  gap: 0.15rem;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: #334155;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
}
.nav-sticker-blocked-dock h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.nav-sticker-blocked-dock p {
  margin: 0;
  font-size: 0.75rem;
  color: #64748b;
}
.nav-sticker-blocked-dock[data-drop-into] {
  border-color: #dc2626;
  background: #fef2f2;
  color: #b91c1c;
}
.nav-sticker-link {
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  align-content: stretch;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  border-radius: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Drawn inside the face: the sticker clips whatever lies outside it, a ring included. */
.nav-sticker-link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  border-radius: 11px;
}
.nav-sticker-top {
  --sticker-domain-line: 1.05rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.nav-sticker-top:not(:has(.nav-sticker-domain)) {
  --sticker-domain-line: 0.1rem;
}
.nav-sticker-head {
  display: flex;
  align-items: flex-end;
  gap: 0.12rem;
  min-width: 0;
  min-height: 0;
  flex: 1 1 0%;
  overflow: hidden;
}
.nav-sticker-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - var(--sticker-domain-line) - 0.06rem);
  height: auto;
  /* The start side, so that it mirrors on a right-to-left page (C10). */
  margin: 0;
  margin-inline-start: 0.08rem;
  aspect-ratio: 1;
  flex: none;
  align-self: flex-end;
  border-radius: 22%;
  overflow: hidden;
  background-color: transparent;
  color: #fff;
}
.nav-accent-0 { background-color: #2563eb; }
.nav-accent-1 { background-color: #7c3aed; }
.nav-accent-2 { background-color: #a21caf; }
.nav-accent-3 { background-color: #db2777; }
.nav-accent-4 { background-color: #dc2626; }
.nav-accent-5 { background-color: #c2410c; }
.nav-accent-6 { background-color: #a16207; }
.nav-accent-7 { background-color: #15803d; }
.nav-accent-8 { background-color: #0f766e; }
.nav-accent-9 { background-color: #0e7490; }
.nav-accent-10 { background-color: #4338ca; }
.nav-accent-11 { background-color: #475569; }
.nav-sticker.is-letter .nav-sticker-mark,
.nav-sticker[data-failed] .nav-sticker-mark {
  border-radius: 22%;
  overflow: hidden;
}
.nav-sticker:not(.is-letter):not([data-failed]) .nav-sticker-mark {
  background-color: transparent;
  border-radius: 22%;
  overflow: hidden;
}
.nav-sticker-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: transparent;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.nav-sticker-letter {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 650;
  font-size: clamp(1.35rem, 7vw, 2rem);
  line-height: 1;
}
.nav-sticker.is-letter .nav-sticker-letter,
.nav-sticker[data-failed] .nav-sticker-letter {
  display: flex;
}
.nav-sticker[data-failed] .nav-sticker-logo {
  display: none;
}
.nav-sticker-id {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  display: block;
  flex: 1 1 0%;
  align-self: flex-end;
  padding-inline-end: 0.16rem;
  padding-bottom: 0.02rem;
  overflow: hidden;
}
.nav-sticker-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 100%;
  min-width: 0;
  font-size: clamp(0.75rem, 2.85vw, 0.8rem);
  font-weight: 650;
  line-height: 1.15;
  overflow: hidden;
  overflow-wrap: break-word;
}
.nav-sticker-domain {
  flex: none;
  box-sizing: border-box;
  height: var(--sticker-domain-line);
  max-width: 100%;
  margin: 0;
  padding: 0.06rem 0 0;
  padding-inline: 0.12rem 0.28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1.2;
  color: #64748b;
}
.nav-sticker-lower {
  display: grid;
  grid-template-rows: minmax(0, 3fr) minmax(0, 1fr);
  align-content: stretch;
  gap: 0.08rem;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 0.04rem 0.32rem 0.16rem;
  box-sizing: border-box;
}
/* A hidden intro or tag strip does not keep its empty track. The card stays square.
   Freed space goes to the logo. The all-on mark width above is untouched, and a
   hidden field never makes the mark narrower than that. */
.nav-sticker.is-intro-off .nav-sticker-tagline,
.nav-sticker.is-tags-off .nav-sticker-tags {
  display: none;
}
.nav-sticker.is-tags-off:not(.is-intro-off) .nav-sticker-lower {
  grid-template-rows: minmax(0, 1fr);
}
/* The address is one short line. While the name still sits beside the mark,
   keep the shipped mark width so that line's absence does not squeeze the name. */
.nav-sticker.is-address-off:not(.is-name-off) .nav-sticker-top {
  --sticker-domain-line: 1.05rem;
}
.nav-sticker.is-name-off .nav-sticker-id {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav-sticker.is-name-off .nav-sticker-head {
  justify-content: center;
}
.nav-sticker.is-name-off .nav-sticker-mark {
  margin: 0;
  align-self: center;
}
.nav-sticker.is-intro-off:not(.is-tags-off) .nav-sticker-link {
  grid-template-rows: minmax(0, 1fr) auto;
}
.nav-sticker.is-intro-off:not(.is-tags-off) .nav-sticker-lower {
  height: auto;
  grid-template-rows: auto;
  padding-top: 0.12rem;
}
.nav-sticker.is-intro-off:not(.is-tags-off) .nav-sticker-tags {
  height: 1.2rem;
}
.nav-sticker.is-intro-off.is-tags-off .nav-sticker-link {
  grid-template-rows: minmax(0, 1fr);
}
.nav-sticker.is-intro-off.is-tags-off .nav-sticker-lower {
  display: none;
}
.nav-sticker.is-intro-off.is-tags-off .nav-sticker-top {
  justify-content: center;
}
.nav-sticker.is-intro-off.is-tags-off .nav-sticker-head {
  flex: none;
  align-items: flex-end;
}
/* Intro is gone, so the name can sit under the mark and the mark can grow
   without stealing the name's line. Width stays above the all-on formula. */
.nav-sticker.is-intro-off:not(.is-name-off) .nav-sticker-top {
  justify-content: center;
}
.nav-sticker.is-intro-off:not(.is-name-off) .nav-sticker-head {
  flex: none;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.nav-sticker.is-intro-off:not(.is-name-off) .nav-sticker-id {
  flex: none;
  width: 100%;
  align-self: center;
  text-align: center;
  padding-inline-end: 0;
}
.nav-sticker.is-intro-off:not(.is-name-off) .nav-sticker-domain {
  text-align: center;
}
.nav-sticker.is-intro-off:not(.is-name-off) .nav-sticker-mark {
  width: min(48%, calc(100% - 3.6rem));
  align-self: center;
  margin: 0;
}
.nav-sticker.is-name-off.is-address-off.is-intro-off:not(.is-tags-off) .nav-sticker-mark {
  width: min(62%, calc(100% - 3.4rem));
}
.nav-sticker.is-name-off.is-intro-off.is-tags-off:not(.is-address-off) .nav-sticker-mark {
  width: min(62%, calc(100% - 3.6rem - var(--sticker-domain-line)));
}
.nav-sticker.is-name-off.is-intro-off.is-tags-off:not(.is-address-off) .nav-sticker-domain {
  text-align: center;
}
.nav-sticker.is-name-off.is-address-off.is-intro-off.is-tags-off .nav-sticker-top {
  justify-content: center;
}
.nav-sticker.is-name-off.is-address-off.is-intro-off.is-tags-off .nav-sticker-head {
  align-items: center;
  justify-content: center;
  width: 100%;
}
.nav-sticker.is-name-off.is-address-off.is-intro-off.is-tags-off .nav-sticker-mark {
  width: min(68%, calc(100% - 3.4rem));
}
.nav-sticker.is-name-off.is-address-off.is-intro-off .nav-sticker-letter,
.nav-sticker.is-name-off.is-intro-off.is-tags-off .nav-sticker-letter {
  font-size: clamp(2rem, 8vw, 3rem);
}
.nav-sticker-tagline {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.3;
  color: #475569;
}
.nav-sticker-tagline-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  /* Three lines of 0.75rem / 1.3 are taller than this track on a 7.25rem
     square, and the extra line box paints under the tag chips. Stay inside
     the track (the plain 100% covers engines without round()), and only keep
     a line when the whole line fits. */
  max-height: 100%;
  max-height: round(down, 100%, 1lh);
}
.nav-sticker-tags {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.nav-sticker-tag-row {
  display: flex;
  align-items: stretch;
  gap: 3px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}
.nav-sticker-tags[data-overflow]::after {
  content: '…';
  flex: none;
  margin-inline-start: 2px;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1;
}
.nav-sticker-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 100%;
  max-height: 1.35rem;
  aspect-ratio: 1;
  border-radius: 22%;
  color: #fff;
}
.nav-sticker-tag svg {
  width: 70%;
  height: 70%;
  display: block;
}
.nav-sticker-bang,
.nav-sticker-code {
  font-weight: 750;
  font-size: 0.72rem;
  line-height: 1;
}
.nav-sticker-tag--caution { background: #facc15; color: #111; }
.nav-sticker-tag--licensed { background: #15803d; }
.nav-sticker-tag--sensitive { background: #f97316; }
.nav-sticker-tag--portal { background: #2563eb; }
.nav-sticker-tag--government { background: #1e3a8a; }
.nav-sticker-tag--education { background: #4338ca; }
.nav-sticker-tag--news { background: #334155; }
.nav-sticker-tag--openSource { background: #64748b; }
.nav-sticker-tag--store { background: #0f766e; }
.nav-sticker-tag--free { background: #bbf7d0; color: #166534; }
.nav-sticker-tag--account { background: #94a3b8; color: #111; }
.nav-sticker-tag--paid { background: #7e22ce; }
.nav-sticker-tag--ios,
.nav-sticker-tag--android,
.nav-sticker-tag--desktop,
.nav-sticker-tag--extension { background: #e2e8f0; color: #0f172a; }
.nav-sticker-tag--mine { aspect-ratio: auto; padding: 0 0.3rem; background: #15803d; font-size: 0.62rem; font-weight: 650; line-height: 1; white-space: nowrap; }
.nav-sticker-xi {
  position: absolute;
  top: 0.2rem;
  inset-inline-end: 0.2rem;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  /* 24px, the smallest target (WCAG 2.5.8). The top corner and the glyph stay where they were
     at 1.35rem; the box grows towards the middle of the sticker. */
  width: 1.5rem;
  height: 1.5rem;
  padding-block: 0.08rem 0;
  padding-inline: 0 0.34rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  font: 700 0.8rem/1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.nav-sticker-xi:hover,
.nav-sticker-xi:focus-visible {
  background: #e2e8f0;
  color: #0f172a;
}
.nav-sticker-xi:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}
.nav-sticker-menu {
  position: fixed;
  z-index: 60;
  min-width: 11.5rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  background: #fff;
  border: 1px solid #d6e2f5;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.nav-sticker-menu button,
.nav-sticker-menu a {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #0f172a;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
.nav-sticker-menu button:hover,
.nav-sticker-menu button:focus-visible,
.nav-sticker-menu a:hover,
.nav-sticker-menu a:focus-visible {
  background: #eff6ff;
  outline: none;
}
/* The pale fill alone is the hover look too; the keyboard gets a ring of its own. */
.nav-sticker-menu button:focus-visible,
.nav-sticker-menu a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
.nav-sticker-menu {
  max-width: min(18rem, calc(100vw - 1rem));
  max-height: calc(100vh - 1rem);
  /* The part of a phone screen the browser's own bars leave free. */
  max-height: calc(100dvh - 1rem);
  overflow: auto;
}
.nav-sticker-menu button[aria-checked='true'] {
  font-weight: 650;
}
.nav-sticker-collect {
  margin-top: 0.2rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.2rem;
}
.nav-custom-note {
  margin: 0;
  padding: 0.4rem 0.6rem;
  color: #64748b;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: start;
}
.nav-custom-name {
  display: block;
  width: 100%;
  margin: 0.15rem 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 0.85rem;
}
.nav-sticker-notes {
  margin-top: 0.2rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.2rem;
}
.nav-note-form {
  padding: 0.25rem 0.3rem 0.35rem;
}
.nav-note-label {
  display: block;
  margin: 0.1rem 0;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  text-align: start;
}
.nav-note-hint {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  margin: 0.2rem 0 0;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.35;
  text-align: start;
}
.nav-note-count {
  flex: none;
  font-variant-numeric: tabular-nums;
}
.nav-note-error {
  margin: 0.25rem 0 0;
  color: #b91c1c;
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: start;
}
.nav-sticker-menu .nav-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.nav-sticker-menu .nav-note-actions button {
  display: inline-block;
  width: auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid #cbd5e1;
  font-size: 0.78rem;
}
.nav-sticker-menu .nav-note-actions button.nav-note-primary,
.nav-sticker-dialog-actions button.nav-note-primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}
.nav-sticker-note-lines {
  margin-top: 0.2rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.2rem;
}
.nav-sticker-note-line {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0;
  padding-inline: 0.6rem 0.2rem;
}
.nav-sticker-note-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #334155;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  text-align: start;
  text-overflow: ellipsis;
  white-space: pre;
}
.nav-sticker-menu button.nav-sticker-note-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  color: #475569;
}
.nav-sticker-menu button.nav-sticker-note-remove:hover,
.nav-sticker-menu button.nav-sticker-note-remove:focus-visible {
  background: #fee2e2;
  color: #b91c1c;
}
/* The confirm dialog is written inside the menu, so the menu's own button rules reach its buttons. */
.nav-sticker-dialog.nav-note-confirm {
  width: min(20rem, calc(100vw - 2rem));
}
.nav-note-confirm-line {
  margin: 0.5rem 0 0;
}
.nav-sticker-menu .nav-note-confirm .nav-sticker-dialog-actions button {
  display: inline-block;
  width: auto;
  padding: 0.4rem 0.8rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  font-size: 0.85rem;
  text-align: center;
}
.nav-sticker-menu .nav-note-confirm .nav-sticker-dialog-actions button.nav-note-danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
.nav-sticker-menu .nav-note-confirm .nav-sticker-dialog-actions button.nav-note-primary {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}
/* The edit dialog's corner cross. Like Close, it leaves without saving. */
.nav-sticker-menu .nav-note-confirm button.nav-note-x {
  position: absolute;
  inset-inline-end: 0.5rem;
  top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border-radius: 8px;
  color: #64748b;
  font-size: 1.25rem;
  line-height: 1;
}
.nav-note-edit h2 {
  padding-inline-end: 2rem;
}
.nav-note-textarea {
  display: block;
  width: 100%;
  min-height: 9rem;
  margin: 0.15rem 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  resize: vertical;
}
.nav-note-detail {
  max-height: min(50vh, 22rem);
  max-height: min(50dvh, 22rem);
  margin: 0.6rem 0 0;
  overflow: auto;
  padding: 0.6rem 0.7rem;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: start;
  white-space: pre-wrap;
}
.nav-sticker-dialog {
  /* The page reset zeroes margins, which pins a modal dialog to the top corner. */
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  width: min(24rem, calc(100vw - 2rem));
  padding: 1.1rem 1.15rem 1rem;
  border: 1px solid #d6e2f5;
  border-radius: 16px;
  color: #0f172a;
  background: #fff;
}
/* The one close control of a dialog: a cross in the corner, 44 px to press (C4). */
.nav-dialog-x {
  position: absolute;
  top: 0.25rem;
  inset-inline-end: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  background: transparent;
  color: #334155;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}
.nav-dialog-x:hover {
  background: #f1f5f9;
}
.nav-dialog-x:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
}
html.dark .nav-dialog-x {
  color: #e2e8f0;
}
html.dark .nav-dialog-x:hover {
  background: #1e293b;
}
.nav-dialog-x ~ h2 {
  padding-inline-end: 2.25rem;
}
.nav-note-ask {
  margin-top: 0.75rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e2e8f0;
}
.nav-note-ask p {
  margin: 0;
  font-weight: 600;
}
.nav-note-ask .nav-sticker-dialog-actions {
  margin-top: 0.6rem;
}
.nav-sticker-dialog-actions button.nav-note-danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
html.dark .nav-note-ask {
  border-top-color: #334155;
}
html.dark .nav-sticker-dialog .nav-sticker-dialog-actions button.nav-note-danger {
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
.nav-sticker-dialog::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.nav-sticker-dialog h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}
.nav-sticker-dialog-domain {
  margin: 0;
  color: #64748b;
  font-size: 0.85rem;
}
.nav-sticker-dialog-tagline {
  margin: 0.7rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}
.nav-sticker-dialog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.nav-sticker-dialog-tags li {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}
.nav-sticker-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.nav-sticker-dialog-actions a,
.nav-sticker-dialog-actions button {
  border-radius: 999px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  text-decoration: none;
}
.nav-sticker-dialog-actions a {
  background: #2563eb;
  color: #fff;
}
.nav-sticker-dialog-actions button {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  cursor: pointer;
}
.nav-section-empty {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: #64748b;
}
html.dark .nav-section-empty {
  color: #94a3b8;
}
.nav-sticker-toast {
  /* Centred between the two edges. Anchored at left: 50% it could be no wider than half the
   * window, so a sentence on a phone was squeezed into several short lines. */
  position: fixed;
  z-index: 70;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  left: 1rem;
  right: 1rem;
  width: fit-content;
  max-width: min(32rem, calc(100% - 2rem));
  margin: 0 auto;
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.85rem;
  border-radius: 1rem;
  background: #0f172a;
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
}
.nav-sticker-toast[data-toast] {
  display: flex;
}
.nav-sticker-toast button {
  flex: none;
  position: relative;
  padding: 0.15rem 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Reach around a small button. */
.nav-sticker-toast button::before {
  content: '';
  position: absolute;
  inset: -0.6rem -0.3rem;
}
.nav-sticker-toast button:hover {
  background: rgba(255, 255, 255, 0.14);
}
.nav-sticker-toast button:focus-visible {
  outline: 2px solid #60a5fa;
  outline-offset: 2px;
}
/* On the dark page a dark line could hardly be seen. */
html.dark .nav-sticker-toast {
  background: #f1f5f9;
  color: #0f172a;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
html.dark .nav-sticker-toast button {
  border-color: rgba(15, 23, 42, 0.4);
}
html.dark .nav-sticker-toast button:hover {
  background: rgba(15, 23, 42, 0.1);
}
html.dark .nav-sticker-toast button:focus-visible {
  outline-color: #1d4ed8;
}
/* Drag preview. The old ghost was only the site name, nine rem wide and one
 * line tall, so the moving sticker was a wide pill. This copy is taken out of
 * the grid and locked to a square; only a translate moves it. The measured
 * pixel size is set inline when the drag starts.
 */
.nav-sticker-ghost {
  position: fixed;
  z-index: 65;
  top: 0;
  left: 0;
  width: 7.25rem;
  height: 7.25rem;
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transform-origin: 0 0;
}
/* The mark on the preview's corner: an arrow for a move, a plus for a copy (Ctrl),
 * a cross where a drop does nothing. No mark while the sticker stays in its own section.
 */
.nav-sticker-ghost-mark {
  position: absolute;
  top: -9px;
  inset-inline-end: -9px;
  display: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #64748b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.4);
}
.nav-sticker-ghost[data-mode='move'] .nav-sticker-ghost-mark,
.nav-sticker-ghost[data-mode='copy'] .nav-sticker-ghost-mark,
.nav-sticker-ghost[data-mode='restore'] .nav-sticker-ghost-mark,
.nav-sticker-ghost[data-mode='block'] .nav-sticker-ghost-mark,
.nav-sticker-ghost[data-mode='none'] .nav-sticker-ghost-mark {
  display: grid;
}
.nav-sticker-ghost[data-mode='move'] .nav-sticker-ghost-mark {
  background: #2563eb;
}
.nav-sticker-ghost[data-mode='move'] .nav-sticker-ghost-mark::before {
  content: '→';
}
html[dir='rtl'] .nav-sticker-ghost[data-mode='move'] .nav-sticker-ghost-mark::before {
  content: '←';
}
.nav-sticker-ghost[data-mode='copy'] .nav-sticker-ghost-mark,
.nav-sticker-ghost[data-mode='restore'] .nav-sticker-ghost-mark {
  background: #16a34a;
}
.nav-sticker-ghost[data-mode='copy'] .nav-sticker-ghost-mark::before,
.nav-sticker-ghost[data-mode='restore'] .nav-sticker-ghost-mark::before {
  content: '+';
}
.nav-sticker-ghost[data-mode='block'] .nav-sticker-ghost-mark {
  background: #dc2626;
}
.nav-sticker-ghost[data-mode='block'] .nav-sticker-ghost-mark::before {
  content: '−';
}
.nav-sticker-ghost[data-mode='none'] .nav-sticker-ghost-mark::before {
  content: '×';
}
.nav-sticker-ghost .nav-sticker-item {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  max-width: none;
  list-style: none;
  opacity: 1;
}
.nav-sticker-preview {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: none;
}
.nav-section-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 0.75rem;
  min-height: 2.75rem;
  padding-block: 0.3rem;
  padding-inline-start: 0.75rem;
  padding-inline-end: 0.35rem;
  background: var(--navcc-avatar-bg, #eef3fd);
  border: 1px solid #c5d7fb;
  border-inline-start: 3px solid var(--navcc-n-blue, #1764f0);
  border-radius: 12px;
  color: var(--navcc-wordmark-ink, #0e1726);
}
.nav-section-title {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.nav-section-title a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  color: inherit;
  text-decoration: none;
}
.nav-section-title a:hover {
  color: var(--navcc-n-blue, #1764f0);
}
.nav-section-title a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
  border-radius: 8px;
}
.nav-section-icon {
  flex: none;
  font-size: 1.05rem;
  line-height: 1;
}
.nav-section-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-section-meta {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
}
.nav-section-count {
  color: #1e293b;
  font-size: 0.8rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  /* 0.8rem x 1.2 of text plus this padding is 24px, the smallest target. */
  padding: 0.275rem 0.4rem;
  border-radius: 8px;
}
.nav-section-count:hover {
  color: var(--navcc-n-blue, #1764f0);
}
/* The phone copy is in the document only when its words or address differ. Wide screens keep the desktop copy. */
.nav-section-count-phone {
  display: none;
}
.nav-section-count:focus-visible,
.nav-section-gear:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.nav-section-gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-inline-start: 0.1rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #1e293b;
  cursor: pointer;
}
.nav-section-gear:hover,
.nav-section-gear:focus-visible {
  background: #fff;
  color: var(--navcc-n-blue, #1764f0);
}
.nav-section-gear svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}
.nav-section-settings-anchor {
  position: relative;
  flex: none;
}
.nav-section-panel {
  position: fixed;
  z-index: 75;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 1rem);
  margin: 0;
  padding: 0.75rem 0.85rem 0.7rem;
  border: 1px solid #c5d7fb;
  border-radius: 12px;
  background: #fff;
  color: var(--navcc-wordmark-ink, #0e1726);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.nav-section-panel h3 {
  margin: 0;
  max-width: min(32rem, calc(100vw - 2.5rem));
  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.35;
}
.nav-section-settings {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}
.nav-section-setting-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-section-setting-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.35;
}
.nav-section-setting-row input {
  flex: none;
  width: 6.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font: inherit;
  font-weight: 550;
}
.nav-section-help-bubble {
  position: relative;
  width: min(22rem, calc(100vw - 2.5rem));
  max-width: 100%;
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.7rem;
  border-radius: 12px;
  background: #0f172a;
  color: #f8fafc;
  font-size: 0.8rem;
  font-weight: 450;
  line-height: 1.45;
}
.nav-section-help-bubble::before {
  content: '';
  position: absolute;
  top: -5px;
  inset-inline-end: 0.35rem;
  border: 5px solid transparent;
  border-top: 0;
  border-bottom-color: #0f172a;
}
.nav-section-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.nav-section-panel-actions button {
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  cursor: pointer;
}
.nav-section-panel-actions button.nav-section-save {
  border: 0;
  background: #2563eb;
  color: #fff;
}
.nav-section-panel-actions button.nav-section-quiet {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
}
.nav-section-panel-actions button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
.nav-sticker-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 520px;
}
/*
 * Three columns on a phone. The rail is 64px and the page inset is 12px, so a
 * 320px window leaves 232px. Two 8px gaps and a 7.25rem minimum fit at most
 * twice (once at 320px).
 * repeat(3) keeps three tracks through 451px, where the minimum would finally
 * fit. The section is widened by 10px of that 12px inset (2px stays, so the
 * section does not slide under the rail or past the screen). The row stays
 * inside the section. content-visibility clips paint to the section box, and a
 * negative margin on the row itself left the outer 10px of the first and last
 * sticker unpainted: logos, domains, blurbs, tags, and part of Ξ. Type stays
 * at the 12px name floor. The domain line shrinks only enough to keep that
 * name's two lines inside the upper half. The tag row keeps a fixed track so
 * its icons do not collapse into the intro; whole intro lines still clip
 * inside their own track. The name reserves the Ξ box, because two 12px lines
 * reach the top corner on these squares and the menu has to stay a separate
 * hit target. Wider windows, including desktop, keep the 7.25rem rule above.
 */
@media (max-width: 451px) {
  /* The wider default is in the HTML. Hide its tail here so the phone count does not wait on script. */
  .nav-tile-wall[data-phone-cap="12"] > li[data-sticker-id]:nth-child(n + 13),
.nav-tile-wall[data-phone-cap="6"] > li[data-sticker-id]:nth-child(n + 7) {
  display: none;
}
  .nav-section-count-desktop {
    display: none;
  }
  .nav-section-count-phone {
    display: block;
  }
  .nav-sticker-section {
    margin-inline: -0.625rem;
  }
  /* A visitor's own category wraps its wall's section in one more: widen once, not twice. */
  .nav-sticker-section .nav-sticker-section {
    margin-inline: 0;
  }
  .nav-tile-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .nav-sticker {
    border-radius: 10px;
  }
  .nav-sticker-top {
    --sticker-domain-line: 0.8rem;
  }
  .nav-sticker-head {
    gap: 0.06rem;
  }
  .nav-sticker-mark {
    margin: 0;
    margin-inline-start: 0.04rem;
  }
  .nav-sticker-letter {
    font-size: clamp(1rem, 5.4vw, 1.35rem);
  }
  .nav-sticker-id {
    padding-inline-end: 1.4rem;
  }
  .nav-sticker-name {
    font-size: 0.75rem;
    line-height: 1.08;
  }
  .nav-sticker-domain {
    padding: 0;
    padding-inline: 0.08rem 0.16rem;
    line-height: 1.15;
  }
  .nav-sticker-lower {
    grid-template-rows: minmax(0, 1fr) 0.85rem;
    gap: 0.04rem;
    padding: 0.02rem 0.14rem 0.08rem;
  }
  .nav-sticker-tagline {
    font-size: 0.75rem;
    line-height: 1.3;
  }
  .nav-sticker-xi {
    top: 0.06rem;
    inset-inline-end: 0.04rem;
    width: 1.5rem;
    height: 1.5rem;
  }
}
/* Phone names keep whole words: lib/sticker-name.ts */
@media (min-width: 340px) and (max-width: 451px) {
  .nav-sticker-name {
    display: block;
    max-height: 2.16em;
    overflow-wrap: normal;
    text-overflow: ellipsis;
  }
  .nav-sticker-id.is-word {
    padding-inline-end: 0.16rem;
  }
}
@media (min-width: 900px) {
  .nav-tile-wall {
    gap: 10px;
  }
}
html.dark .nav-sticker,
html.dark .nav-sticker-menu,
html.dark .nav-sticker-dialog {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}
html.dark .nav-sticker-ghost {
  background: transparent;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
html.dark .nav-sticker-blocked-dock {
  border-color: #475569;
  background: rgba(15, 23, 42, 0.96);
  color: #e2e8f0;
}
html.dark .nav-sticker-blocked-dock p {
  color: #94a3b8;
}
html.dark .nav-sticker-blocked-dock[data-drop-into] {
  border-color: #f87171;
  background: #450a0a;
  color: #fecaca;
}
html.dark .nav-sticker-logo {
  filter: none;
}
html.dark .nav-sticker[data-low-contrast]:not(.is-letter):not([data-failed]) .nav-sticker-logo {
  background-color: #f4f7fb;
}
html.dark .nav-sticker-tagline,
html.dark .nav-sticker-dialog-domain,
html.dark .nav-sticker-xi {
  color: #94a3b8;
}
html.dark .nav-sticker-domain {
  color: #94a3b8;
}
html.dark .nav-sticker-xi:hover,
html.dark .nav-sticker-xi:focus-visible {
  background: #1e293b;
  color: #f8fafc;
}
html.dark .nav-sticker-menu button,
html.dark .nav-sticker-menu a,
html.dark .nav-sticker-dialog-actions button {
  color: #f8fafc;
  background: transparent;
}
html.dark .nav-sticker-dialog-actions button {
  border-color: #475569;
}
html.dark .nav-sticker-menu button:hover,
html.dark .nav-sticker-menu button:focus-visible,
html.dark .nav-sticker-menu a:hover,
html.dark .nav-sticker-menu a:focus-visible {
  background: #1e293b;
}
html.dark .nav-sticker-collect {
  border-top-color: #334155;
}
html.dark .nav-custom-note {
  color: #94a3b8;
}
html.dark .nav-custom-name {
  background: #0f172a;
  border-color: #475569;
  color: #f8fafc;
}
html.dark .nav-sticker-notes,
html.dark .nav-sticker-note-lines {
  border-top-color: #334155;
}
html.dark .nav-note-label {
  color: #cbd5e1;
}
html.dark .nav-note-hint {
  color: #94a3b8;
}
html.dark .nav-note-error {
  color: #fca5a5;
}
html.dark .nav-sticker-menu .nav-note-actions button {
  border-color: #475569;
}
html.dark .nav-sticker-menu .nav-note-actions button.nav-note-primary,
html.dark .nav-sticker-dialog-actions button.nav-note-primary {
  border-color: #3b82f6;
  background: #2563eb;
  color: #fff;
}
html.dark .nav-sticker-note-text,
html.dark .nav-sticker-menu button.nav-sticker-note-icon {
  color: #cbd5e1;
}
html.dark .nav-sticker-menu button.nav-sticker-note-remove:hover,
html.dark .nav-sticker-menu button.nav-sticker-note-remove:focus-visible {
  background: #7f1d1d;
  color: #fecaca;
}
html.dark .nav-sticker-menu .nav-note-confirm .nav-sticker-dialog-actions button {
  border-color: #475569;
  background: transparent;
  color: #f8fafc;
}
html.dark .nav-sticker-menu .nav-note-confirm .nav-sticker-dialog-actions button.nav-note-danger {
  border-color: #ef4444;
  background: #dc2626;
  color: #fff;
}
html.dark .nav-sticker-menu .nav-note-confirm .nav-sticker-dialog-actions button.nav-note-primary {
  border-color: #3b82f6;
  background: #2563eb;
  color: #fff;
}
html.dark .nav-sticker-menu .nav-note-confirm button.nav-note-x {
  color: #94a3b8;
}
html.dark .nav-note-textarea {
  background: #0f172a;
  border-color: #475569;
  color: #f8fafc;
}
html.dark .nav-note-detail {
  border-color: #334155;
  color: #f8fafc;
}
html.dark .nav-section-bar {
  background: #122033;
  border-color: #23406e;
  border-inline-start-color: var(--navcc-n-blue, #296bf5);
  color: #f8fafc;
}
html.dark .nav-section-count,
html.dark .nav-section-gear {
  color: #e2e8f0;
}
html.dark .nav-section-title a:hover,
html.dark .nav-section-count:hover,
html.dark .nav-section-gear:hover,
html.dark .nav-section-gear:focus-visible {
  color: #93c5fd;
}
html.dark .nav-section-gear:hover,
html.dark .nav-section-gear:focus-visible {
  background: #1e3a5f;
}
html.dark .nav-section-panel {
  background: #0f172a;
  border-color: #334155;
  color: #f8fafc;
}
html.dark .nav-section-setting-row input,
html.dark .nav-section-panel-actions button.nav-section-quiet {
  background: #0f172a;
  border-color: #475569;
  color: #f8fafc;
}
html.dark .nav-section-help-bubble {
  background: #e2e8f0;
  color: #0f172a;
}
html.dark .nav-section-help-bubble::before {
  border-bottom-color: #e2e8f0;
}
@media (prefers-reduced-motion: reduce) {
  .nav-sticker {
    transition: none;
  }
}