/* SNOPPP — flat Gumroad tokens (no shadows). */

/*
  From gumroad.com / design system:
  Canvas #F2F2F2 · Ink #000 · Coin #2A2A2A · Marker #A0A0A0
  Header: white, h-20 (80px), border-b 1px black
  Body: ABC Favorit, text-base 16px, tracking-tight
  Cards: white, rounded-2xl (16px), flat (no shadow)
  Stroke: 1px
*/

:root {
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --canvas: #F2F2F2;
  --ink: #111111;
  --coin: #2A2A2A; /* primary fill — charcoal */
  --coin-soft: #E6E6E6; /* soft wash for rows / surfaces */
  --marker: #D0D0D0; /* selection */

  --bg: var(--canvas);
  --surface: #FFFFFF;
  --paper: #FFFFFF;
  --chip: #FFFFFF;
  --chip-deep: #EBEBEB;
  --chip-muted: var(--canvas);
  --mute: #E0E0E0;
  --mute-deep: #BDBDBD;

  --ink-header: var(--ink);
  --ink-muted: var(--ink);
  --ink-faint: var(--ink);
  --ink-done: var(--ink);
  --accent: var(--coin);
  --accent-pager: var(--coin);
  --done-green: #2A2A2A;
  --line: var(--ink);
  --divider: var(--ink);
  --stroke: 1px;
  --logo-w: 140px;
  --logo-h: 28px;

  --topbar-h: 80px;
  --dock-h: 210px;
  --dock-h-collapsed: 72px;
  --card-w: 276.25px;
  --card-gap: 20px;
  --board-pad: 24px;
  --head-h: 36px;
  --row-h: 20px;
  --radius-card: 4px;
  --radius-chip: 999px;
  --radius-menu: 4px;
  --radius-btn: 4px; /* Gumroad Discover: Log in / Start selling */
  --menu-hover: #F0F0F0;
  --menu-row-h: 40px;
  /* snop content column: header handle + line handles share this axis */
  --noto-inset: 10px;
  --noto-handle: 15px;
  --noto-gap: 4px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.625;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--marker); color: var(--ink); }

/* ---------- icons (inline SVG, 1px non-scaling stroke) ---------- */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22.5px;
  height: 22.5px;
  flex: none;
  color: inherit;
  line-height: 0;
}
.icon > svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.i-chevron         { width: 11.25px; height: 11.25px; transform: rotate(90deg); }
.i-plus            { width: 18.75px; height: 18.75px; }
.i-search          { width: 20.625px; height: 20.625px; }
.i-drag            { width: 22.5px; height: 22.5px; }
/* Checkbox frame = same 1px stroke as NOTO card border (--stroke) */
.i-checkbox-empty,
.i-checkbox-checked {
  width: 14px;
  height: 14px;
  border: var(--stroke) solid currentColor;
  border-radius: 1px;
  box-sizing: border-box;
  background: transparent;
  color: #000000;
}
.i-checkbox-checked > svg {
  width: 12px;
  height: 12px;
  display: block;
  margin: -1px 0 0 -1px;
  overflow: visible;
}
.i-check-sq        { width: 18.75px; height: 18.75px; }
.i-share           { width: 18px; height: 18px; }
.i-delete          { width: 18px; height: 18px; }
.i-settings        { width: 18px; height: 18px; }
.i-account         { width: 18px; height: 18px; }
.i-caret           { width: 14px; height: 14px; }
.i-edit            { width: 14px; height: 14px; }
.i-clock           { width: 16px; height: 16px; }

/* ---------- top bar (Gumroad: white, h-20, 1px ink, flat pills) ---------- */

.topbar {
  position: relative;
  z-index: 50;
  height: var(--topbar-h);
  display: block;
  align-items: center;
  padding: 0 16px 0 24px;
  user-select: none;
  background: var(--canvas);
  border-bottom: var(--stroke) solid var(--ink);
  box-shadow: none;
  overflow: visible;
}

.topbar-left {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  height: 100%;
  width: auto;
  padding-left: 24px;
}

.logo-full {
  display: block;
  width: var(--logo-w);
  height: var(--logo-h);
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--ink);
  -webkit-mask: url("assets/boltnot-logo.png") left center / contain no-repeat;
  mask: url("assets/boltnot-logo.png") left center / contain no-repeat;
  flex: none;
  cursor: pointer;
  appearance: none;
}
.logo-full:hover { background-color: var(--coin); }
.logo-full:focus-visible {
  outline: var(--stroke) solid var(--ink);
  outline-offset: 4px;
}

/* Header controls — Gumroad Discover: Log in (outline) / Start selling (fill), 4px */
.topbar-btn,
.topbar-new,
.topbar-group,
.topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 16px;
  margin: 0;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  cursor: pointer;
  box-sizing: border-box;
  flex: none;
  box-shadow: none;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.topbar-btn:hover,
.topbar-group:hover,
.topbar-icon-btn:hover {
  background: var(--menu-hover);
  color: var(--ink);
}
.topbar-new {
  background: var(--ink);
  color: #FFFFFF;
  border-color: var(--ink);
}
.topbar-new:hover {
  background: var(--coin);
  color: var(--ink);
  border-color: var(--ink);
}
.topbar-btn.is-active,
.topbar-btn.is-open,
.topbar-new.is-active,
.topbar-group.is-open,
.topbar-icon-btn.is-open {
  background: var(--coin);
  color: var(--ink);
  border-color: var(--ink);
}

.topbar-mid {
  position: absolute;
  left: calc(var(--board-pad) + var(--logo-w) + var(--board-pad));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-new {
  position: static;
  transform: none;
}

.topbar-viewport {
  position: static;
  transform: none;
  width: 240px;
  min-width: 240px;
  max-width: 240px;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 0 16px;
  box-sizing: border-box;
  background: #FFFFFF;
  border-color: var(--ink);
}
.topbar-viewport .viewport-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.025em;
}
.topbar-viewport .viewport-badge {
  flex: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--coin);
  border: var(--stroke) solid var(--ink);
  padding: 2px 6px;
  border-radius: var(--radius-btn);
  line-height: 1.2;
}
.topbar-viewport .i-caret {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: .7;
}

.viewport-dots {
  --dot-size: 20px; /* match “o” in snop logo at --logo-h */
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  margin-left: 4px;
}
.viewport-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #D0D0D0;
  cursor: pointer;
  flex: none;
  appearance: none;
  box-sizing: border-box;
}
.viewport-dot:hover { background: var(--coin); }
.viewport-dot.is-active,
.viewport-dot.is-active:hover,
.viewport-dot.is-active.is-strong,
.viewport-dot.is-active.is-strong:hover,
.viewport-dot.is-drop-target {
  background: var(--coin);
  border: none;
  box-shadow: none;
}
.viewport-dot.is-drop-blocked {
  background: #444444;
  cursor: not-allowed;
  box-shadow: none;
}
body.dragging-card .viewport-dot {
  cursor: copy;
}
body.dragging-card .viewport-dot.is-drop-blocked {
  cursor: not-allowed;
}
.viewport-drop-tip {
  position: fixed;
  z-index: 10050;
  max-width: min(260px, calc(100vw - 24px));
  padding: 8px 10px;
  background: var(--ink);
  color: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.3;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.topbar-right {
  position: absolute;
  top: 0;
  right: 16px;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-right .topbar-group {
  height: 48px;
  padding: 0 16px;
  width: auto;
}
.topbar-right #myTimeBtn {
  width: auto;
  transition: none;
}
.topbar-right #myTimeBtn:hover {
  background: var(--coin);
  color: var(--ink);
  border-color: var(--ink);
}
/* Stay light while sheet is open — accent only on hover */
.topbar-right #myTimeBtn.is-open,
.topbar-right #myTimeBtn.is-active {
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--ink);
}
.topbar-right #myTimeBtn.is-open:hover,
.topbar-right #myTimeBtn.is-active:hover {
  background: var(--coin);
}
.filter-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  height: auto;
  color: var(--accent);
}
.filter-badge-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--accent);
  line-height: 1;
}
.filter-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--accent);
}
.filter-badge .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.filter-badge .i-checkbox-empty,
.filter-badge .i-checkbox-checked {
  border-color: var(--accent);
  color: var(--accent);
}

/* Filter lives in footer dock — compact row when section expands */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.filter-row-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  flex: none;
  color: #000000;
}
.filter-row-icon .icon {
  width: 16px;
  height: 16px;
}
.filter-toggles {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.filter-toggles button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 0;
  height: 28px;
  width: 56px;
  box-sizing: border-box;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--ink);
  text-align: center;
}
.filter-toggles button:hover { background: var(--menu-hover); }
/* Show = thick black outline only; Hide = slightly lighter */
.filter-toggles button.is-on[data-vis="show"] {
  background: #FFFFFF;
  color: var(--ink);
  border: 2.5px solid var(--ink);
}
.filter-toggles button.is-on[data-vis="show"]:hover {
  background: #FFFFFF;
}
.filter-toggles button.is-on[data-vis="hide"] {
  background: #E8E8E8;
  color: rgba(0, 0, 0, 0.55);
  border: var(--stroke) solid rgba(0, 0, 0, 0.35);
}
.filter-toggles button.is-on[data-vis="hide"]:hover {
  background: #E0E0E0;
}

.topbar-icon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
}
.topbar-icon-btn .icon { width: 16px; height: 16px; }
.topbar-icon-btn .account-heart {
  font-size: 18px;
  line-height: 1;
  display: block;
}

/* Account / login — full-color icon (no muted veil) */
#accountBtn .account-heart {
  opacity: 1;
  filter: none;
}
#accountBtn:hover,
#accountBtn.is-open {
  background: #FFFFFF;
  border-color: var(--ink);
  color: var(--ink);
}

.account-status {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #B0B0B0;
  box-shadow: none;
  pointer-events: none;
}
.account-status[hidden] { display: none !important; }

.viewport-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  flex: none;
}
.popmenu.viewport-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: auto;
  min-width: 0;
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 80;
}
.popmenu.viewport-menu[hidden] {
  display: none !important;
}
.popmenu.viewport-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.viewport-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
}
.viewport-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px 8px 4px 16px;
  border-radius: 0;
  border-bottom: var(--stroke) solid var(--ink);
  cursor: pointer;
}
.viewport-row:hover { background: var(--menu-hover); }
.viewport-row.is-active { background: var(--coin-soft); }
.viewport-row-label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.viewport-row-badge {
  flex: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--coin);
  border: var(--stroke) solid var(--ink);
  padding: 1px 5px;
  border-radius: var(--radius-btn);
  line-height: 1.2;
}
.viewport-row-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  outline: none;
  border: none;
  background: transparent;
  font-family: inherit;
  color: inherit;
  padding: 4px 0;
}
.viewport-row-name.is-editing {
  background: #fff;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 4px 8px;
  box-shadow: none;
  text-transform: none;
}
.viewport-row-actions {
  display: flex;
  align-items: center;
  flex: none;
}
.viewport-row-menu {
  flex: none;
  width: 22px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
  border-radius: var(--radius-btn);
}
.viewport-row-menu:hover { background: var(--menu-hover); }
.viewport-row-menu .line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.viewport-row-menu.is-open { color: var(--accent); }

.viewport-menu-footer {
  flex: none;
  margin-top: 0;
  padding: 0;
  border-top: calc(var(--stroke) * 2) solid var(--ink);
  background: var(--ink);
  box-sizing: border-box;
}
.viewport-list .viewport-row:last-child {
  border-bottom: none;
}
.viewport-new {
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  text-align: left;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  transition: background-color .12s ease, color .12s ease;
}
.viewport-new:hover {
  background: var(--coin);
  color: var(--ink);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(32, 28, 25, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay[hidden] { display: none !important; }
.modal-card {
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: none;
  padding: 22px 24px;
  max-width: 420px;
  width: 100%;
}
.modal-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.modal-body {
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 18px;
  opacity: .7;
  letter-spacing: -0.025em;
}
.modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-btn {
  height: 48px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  cursor: pointer;
  padding: 0 16px;
}
.modal-btn:hover { background: var(--coin); color: var(--ink); }
.modal-btn.is-danger {
  background: #FFFFFF;
  color: #444444;
}
.modal-btn.is-danger:hover {
  background: #E8E8E8;
}
.modal-btn.is-muted {
  background: #FFFFFF;
  color: var(--ink);
}
.modal-btn.is-muted:hover { background: var(--menu-hover); }
.modal-actions-row {
  flex-direction: row;
  gap: 8px;
}
.modal-actions-row .modal-btn { flex: 1; }
.modal-btn.is-ok {
  background: var(--ink);
  color: #FFFFFF;
}
.modal-btn.is-ok:hover { background: var(--coin); color: var(--ink); }
.modal-btn.is-cancel {
  background: #FFFFFF;
  color: var(--ink);
}
.modal-btn.is-cancel:hover { background: var(--menu-hover); }

.dock-move-card { max-width: 360px; }
.dock-move-flow {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 4px 0 18px;
}
.dock-move-to {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #000;
  opacity: .45;
  text-align: center;
}
.dock-move-chip {
  height: 40px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: #000;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  cursor: default;
  padding: 0 14px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.dock-move-chip.is-viewport {
  background: var(--coin-soft);
  color: var(--ink);
}

.modal-btn.is-block {
  width: 100%;
}
.modal-btn.is-bold {
  font-weight: 700;
}
.modal-or {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  opacity: 0.45;
  text-align: center;
  padding: 2px 0;
}
.modal-move {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.modal-move-label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.2;
}
.modal-select {
  width: 100%;
  height: 40px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: -0.025em;
  padding: 0 12px;
  box-sizing: border-box;
}

/* Board delete dialog — charcoal surface, white controls */
.vp-delete-card {
  background: var(--coin);
  color: #000000;
  max-width: 400px;
  padding: 24px;
  gap: 0;
}
.vp-delete-card .modal-title {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 18px;
  color: #000000;
}
.vp-delete-card .modal-actions {
  gap: 10px;
}
.vp-delete-card .modal-or {
  opacity: 1;
  font-weight: 700;
  color: #000000;
  padding: 4px 0;
}
.vp-delete-card .modal-move-label {
  color: #000000;
  font-weight: 700;
}
.vp-delete-card .modal-btn,
.vp-delete-card .modal-btn.is-danger,
.vp-delete-card .modal-btn.is-muted {
  background: #FFFFFF;
  color: #000000;
  border-color: #000000;
}
.vp-delete-card .modal-btn:hover,
.vp-delete-card .modal-btn.is-muted:hover {
  background: #FFFFFF;
  color: #000000;
}
.vp-delete-card .modal-btn.is-danger:hover {
  background: #222222;
  border-color: #222222;
  color: #FFFFFF;
}
.vp-delete-card .modal-select {
  background: #FFFFFF;
  color: #000000;
  border-color: #000000;
}

/* ---------- board ---------- */

.board-wrap {
  position: absolute;
  top: var(--topbar-h);
  bottom: var(--dock-h-collapsed);
  left: 0; right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  background:
    var(--bg);
}
.board {
  --grid-cols: 20;
  --grid-row: 28px;
  --grid-gap: var(--board-pad);
  --cell-step-x: 40px;
  --cell-step-y: 34px;
  height: max-content;
  min-height: 100%;
  padding: var(--board-pad);
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  grid-auto-rows: var(--grid-row);
  column-gap: var(--grid-gap);
  row-gap: var(--grid-gap);
  align-content: start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}
/* Fallback scroll room; JS syncBoardViewerScrollRoom() sets an exact px value */
body.sheet-open .board {
  padding-bottom: calc(var(--org-h, 50vh) + 50vh);
}
/* Transparent grid overlay while moving / resizing / placing */
body.dragging-card .board,
body.resizing-card .board,
body.placing-noto .board {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .06) var(--stroke), transparent var(--stroke)),
    linear-gradient(to bottom, rgba(0, 0, 0, .06) 0, rgba(0, 0, 0, .06) var(--stroke), transparent var(--stroke));
  background-size: var(--cell-step-x) var(--cell-step-y);
  background-position: var(--board-pad) var(--board-pad);
  background-repeat: repeat;
}
body.placing-noto { cursor: crosshair; }
body.placing-noto .noto { pointer-events: none; }

.board.is-ref {
  display: flex;
  gap: var(--card-gap);
  align-items: flex-start;
  height: 100%;
  background-image: none;
}
.board.is-ref .noto {
  height: auto;
}
.bcol {
  width: var(--card-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: 100%;
}

.grid-drop-preview {
  position: fixed;
  z-index: 55;
  pointer-events: none;
  border: var(--stroke) dashed var(--accent);
  border-radius: var(--radius-card);
  background: rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Place/duplicate preview = same surface + typography as a real snop */
.grid-drop-preview.is-place {
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-style: solid;
  opacity: .95;
  box-shadow: none;
  font-family: inherit;
  letter-spacing: -0.025em;
}
.grid-drop-preview.is-place.is-blocked {
  border-color: var(--ink);
  opacity: .55;
}
.grid-drop-preview.is-place .noto-head {
  pointer-events: none;
}
.grid-drop-preview.is-place .noto-head .icon.i-drag {
  cursor: inherit;
}
.grid-drop-preview.is-place .noto-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- noto card — white, 16px radius, flat ---------- */

.noto {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  box-shadow: none;
  --snop-bg: #FFFFFF;
  --snop-head: var(--canvas);
  --snop-ink: var(--ink);
  --snop-pattern: none;
  --snop-pattern-size: auto;
}
.noto.has-style {
  background-color: var(--snop-bg);
  background-image: var(--snop-pattern);
  background-size: var(--snop-pattern-size);
  color: var(--snop-ink);
}
.noto.has-style .noto-head {
  background: var(--snop-head);
  color: var(--snop-ink);
  border-bottom-color: color-mix(in srgb, var(--snop-ink) 28%, transparent);
}
.noto.has-style .noto-body {
  background: transparent;
  color: var(--snop-ink);
}
.noto.has-style .noto-title,
.noto.has-style .noto-head .icon,
.noto.has-style .line-handle,
.noto.has-style .line-menu,
.noto.has-style .noto-menu,
.noto.has-style .line-text,
.noto.has-style .line-time,
.noto.has-style .line-date,
.noto.has-style .type-tag {
  color: var(--snop-ink);
}
.noto.has-style .line-menu-dot,
.noto.has-style .noto-menu .line-menu-dot {
  background: var(--snop-ink);
}
.noto.has-style .i-checkbox-empty,
.noto.has-style .i-checkbox-checked {
  border-color: var(--snop-ink);
  color: var(--snop-ink);
}
.noto.has-style .line.is-selected .line-text,
.noto.has-style .line.is-line-sel .line-text {
  color: var(--coin);
}
.noto.is-grid-invalid {
  outline: var(--stroke) dashed #444444;
  outline-offset: 1px;
}
.noto.flash { outline: 2px solid var(--coin); outline-offset: 2px; }
/* Viewer click: static thick black frame (no pulse), cleared after 2s */
.noto.is-viewer-hl {
  outline: 3px solid #000000;
  outline-offset: 0;
  z-index: 5;
}
.line.is-viewer-hl {
  outline: 3px solid #000000;
  outline-offset: -2px;
  border-radius: 2px;
  z-index: 3;
}
.noto.flash-pulse {
  /* One cycle = lub-dub size heartbeat; play twice */
  transform-origin: center center;
  will-change: transform;
  animation: noto-flash-pulse 0.85s ease-out 2;
  z-index: 5;
}
@keyframes noto-flash-pulse {
  0%   { transform: scale(1); }
  /* lub — sharp thump */
  12%  { transform: scale(1.045); }
  22%  { transform: scale(1); }
  /* dub — slightly softer follow-up */
  34%  { transform: scale(1.03); }
  48%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Target line: soft gray glow in, slow fade out (no pulse) */
.line.flash-line {
  position: relative;
  z-index: 3;
  border-radius: 3px;
  animation: line-flash-glow 1.8s ease-in-out 1 forwards;
}
@keyframes line-flash-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }
  18% {
    box-shadow:
      0 0 0 2px rgba(0, 0, 0, 0.55),
      0 4px 18px rgba(0, 0, 0, 0.20);
    background: rgba(0, 0, 0, 0.07);
  }
  40% {
    box-shadow:
      0 0 0 2px rgba(0, 0, 0, 0.45),
      0 4px 16px rgba(0, 0, 0, 0.16);
    background: rgba(0, 0, 0, 0.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }
}

.noto-resize {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 6;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 14px;
  line-height: 1;
  user-select: none;
  touch-action: none;
  transition: opacity .1s;
}
.noto-resize:hover,
.noto-resize.is-active { opacity: 1; }
.noto-resize.se { bottom: 0; right: 0; cursor: nwse-resize; }

.noto-head {
  background: var(--canvas);
  color: var(--ink-header);
  height: var(--head-h);
  display: flex;
  align-items: center;
  gap: var(--noto-gap);
  padding: 0 var(--noto-inset);
  flex: none;
  border-bottom: var(--stroke) solid var(--ink);
  border-radius: calc(var(--radius-card) - 1px) calc(var(--radius-card) - 1px) 0 0;
  position: relative;
  z-index: 6; /* keep bottom rule above the custom scrollbar */
}
.noto-head .icon.i-drag {
  width: var(--noto-handle);
  height: var(--row-h);
  flex: none;
  color: #000000;
  opacity: 1;
  cursor: grab;
  touch-action: none;
}

.noto-title {
  flex: 1;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--ink-header);
  outline: none;
  white-space: nowrap;
  overflow: hidden;
}

.noto-badge {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--coin);
  border: var(--stroke) solid var(--ink);
  padding: 2px 7px;
  border-radius: var(--radius-btn);
  line-height: 1.2;
}

.noto-tools { display: flex; gap: 2.5px; align-items: center; }
.noto-tools button { background: none; border: none; cursor: pointer; color: #000000; padding: 0; display: flex; }

.noto-body {
  flex: 1;
  padding: 8px var(--noto-inset) 8px;
  background: var(--surface);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Native bar hidden — custom 4px rail on the noto edge */
  scrollbar-width: none;
}
.noto-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* Custom scrollbar flush to the noto right border (never overlaps header) */
.noto-scrollbar {
  position: absolute;
  top: calc(var(--head-h) - var(--stroke)); /* flush to header bottom rule */
  right: 0;
  bottom: 0;
  width: 5px;
  z-index: 5; /* below .noto-head so the black rule covers the top edge */
  pointer-events: none;
  background: transparent;
  overflow: hidden; /* clip thumb so it can't enter the header */
}
.noto-scrollbar.is-active {
  pointer-events: auto;
}
.noto-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  background: var(--mute);
  border-radius: 0; /* square ends */
  pointer-events: auto;
  cursor: default;
  will-change: transform;
}
.noto-scrollbar:not(.is-active) .noto-scrollbar-thumb {
  display: none;
}

/* Fixed card states shown in the master desktop artboard. */
.ref-view .bcol:nth-child(1) .noto,
.ref-view .bcol:nth-child(2) .noto { height: 540px; }
.ref-view .bcol:nth-child(3) .noto:first-child { height: 245px; }
.ref-view .bcol:nth-child(3) .noto:last-child { height: 275px; }
.ref-view .bcol:nth-child(4) .noto { height: 275px; }

/* ---------- line row ---------- */

.line {
  display: flex;
  align-items: flex-start;
  gap: var(--noto-gap);
  min-height: var(--row-h);
  padding: 0;
  /* Test: same vertical rhythm as LIST / bullets for every hard line break */
  margin-top: 4px;
  margin-bottom: 4px;
}
.line + .line {
  margin-top: 2px;
}
.line-handle {
  width: var(--noto-handle);
  height: var(--row-h);
  color: #000000;
  cursor: grab;
  touch-action: none;
  flex: none;
  opacity: 1;
  align-self: flex-start;
}
.line:hover .line-handle { opacity: 1; }

/* Dot / LIST markers → left indent + spacing */
.line-bullet.dot {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 5.75px; /* align with first text line (17.5px) */
  margin-left: 6px;
  margin-right: 6px;
  align-self: flex-start;
  pointer-events: none;
}
.line-list-mark {
  position: relative;
  flex: none;
  width: 25px;
  min-height: var(--row-h);
  margin-left: 6px;
  margin-right: 6px;
  align-self: stretch;
  pointer-events: none;
}
.line-list-h {
  position: absolute;
  left: 0;
  top: calc((17.5px - var(--stroke)) / 2);
  width: 25px;
  height: var(--stroke);
  background: #000000;
}
.line.has-bullet .line-text,
.line.has-list .line-text {
  padding-left: 2px;
}

.line-text {
  flex: 1;
  outline: none;
  font-size: 14.5px;
  line-height: 17.5px;
  min-height: 17.5px;
  color: #000000;
  word-break: break-word;
  white-space: pre-wrap;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.line-text:empty::before { content: "\200b"; }
.line.is-done .line-text { text-decoration: line-through; color: #000000; }
.line.is-selected .line-text { color: var(--accent); }
.line.is-line-sel {
  background: rgba(0, 0, 0, 0.10);
  border-radius: 2px;
}
.line.is-line-sel .line-text { color: var(--accent); }
.line.is-line-sel .line-handle { opacity: 1; color: var(--accent); }
body.line-drag-selecting {
  cursor: default;
}
body.line-drag-selecting .line-text {
  user-select: none !important;
  -webkit-user-select: none !important;
}
.line.is-dragging { opacity: .22; }

.line-date,
.type-tag {
  font-size: 11.25px;
  color: #000000;
  flex: none;
  line-height: var(--row-h);
  align-self: center;
}
.type-tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .75px;
  text-transform: uppercase;
}
.line.is-selected .line-date,
.line.is-selected .type-tag { color: var(--accent); }

/* Right cluster: time icon + checkbox */
.line-aside {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3.75px;
  flex: none;
  min-height: var(--row-h);
  min-width: 14px;
  align-self: flex-start;
}

.line-widget {
  flex: none;
  width: 14px;
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  align-self: center;
}
.line-widget.is-empty {
  display: none;
}
.line-widget .i-checkbox-empty,
.line-widget .i-checkbox-checked { color: #000000; }

.line-time {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 16px;
  height: var(--row-h);
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #000000;
  align-self: center;
  cursor: pointer;
  z-index: 1;
  appearance: none;
  font: inherit;
}
.line-time .icon,
.line-time .i-clock {
  width: 16px;
  height: 16px;
  color: inherit;
}
.line.is-selected .line-time { color: var(--accent); }
.line-time-tip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 2px);
  z-index: 8;
  padding: 4px 7px;
  background: var(--ink);
  color: var(--canvas);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: var(--radius-btn);
  pointer-events: none;
  box-shadow: none;
}
.line-time:hover {
  z-index: 8;
}
.line-time:hover .line-time-tip { display: block; }

.line-aside .type-tag,
.line-aside .line-date {
  text-align: right;
}

/* Single-dot submenu trigger (mirror of 6-dot handle, one center point) */
.line-menu {
  flex: none;
  width: 15px;
  height: var(--row-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
  align-self: flex-start;
}
.line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.line.is-selected .line-menu { color: var(--accent); }
.line:has(> .line-menu:hover),
.line:has(> .line-handle:hover) {
  background: rgba(32, 28, 25, 0.07);
  border-radius: 2px;
}

.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.dot-white  { background: var(--paper); }
.dot-black  { background: #000000; }
.dot-orange { background: var(--accent); }
.dot-green  { background: var(--done-green); }

.line.is-done .line-time { opacity: 1; }
body.filter-hide-done .line.is-done { display: none; }

/* ---------- drag ---------- */

.insert-marker { position: fixed; z-index: 60; pointer-events: none; background: var(--accent); }
.insert-marker.h { height: 2.5px; }
.insert-marker.v { width: 2.5px; }

.drag-ghost {
  position: fixed; z-index: 61; pointer-events: none; opacity: .92;
  background: var(--surface);
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  transform: translate(-7.5px, -50%);
}
.drag-ghost.dock-noto-ghost {
  transform: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: none;
  opacity: .95;
}
.drag-ghost.dock-noto-ghost .noto-head { flex: none; }
.drag-ghost.dock-noto-ghost .noto-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.drag-ghost.dock-noto-ghost .line-handle,
.drag-ghost.dock-noto-ghost .line-menu,
.drag-ghost.dock-noto-ghost .noto-menu,
.drag-ghost.dock-noto-ghost .noto-resize { display: none !important; }
.drag-ghost.line-multi-ghost {
  display: flex;
  flex-direction: column;
  transform: translate(-7.5px, -12px);
  max-height: min(60vh, 320px);
  overflow: hidden;
  box-shadow: none;
}
.drag-ghost.line-multi-ghost .line-handle,
.drag-ghost.line-multi-ghost .line-menu { display: none !important; }
.drag-ghost.line-multi-ghost .line.is-line-sel { background: transparent; }
body.dragging, body.dragging * { cursor: grabbing !important; user-select: none !important; }

.line-text b, .line-text strong { font-weight: 700; }
.line-text i, .line-text em { font-style: italic; }
.line-text u { text-decoration: underline; }
.line-text big {
  font-size: 1.45em;
  line-height: 1.25;
  font-weight: inherit;
  position: relative;
  top: -4px;
}

.fmt-menu {
  position: fixed;
  z-index: 72;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-menu);
  box-shadow: none;
  user-select: none;
}
.fmt-menu[hidden] { display: none !important; }
.fmt-menu .fmt-btn {
  font-family: inherit;
  width: 32px;
  height: 32px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
.fmt-menu .fmt-btn:hover { background: var(--menu-hover); }
.fmt-menu .fmt-btn.is-on {
  background: var(--coin);
  color: var(--ink);
}
.fmt-menu .fmt-b { font-weight: 700; font-size: 13px; line-height: 1; }
.fmt-menu .fmt-i { font-style: italic; font-size: 13px; font-weight: 500; line-height: 1; }
.fmt-menu .fmt-u { font-size: 12px; font-weight: 600; text-decoration: underline; line-height: 1; }
.fmt-menu .fmt-clear {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  height: 32px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 0 12px;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--ink);
  flex: none;
}
.fmt-menu .fmt-clear:hover { background: var(--menu-hover); }

/* ---------- line submenu ---------- */

.linemenu {
  position: fixed;
  z-index: 70;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-menu);
  box-shadow: none;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  min-width: 168px;
  user-select: none;
  overflow: visible;
}
.linemenu-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linemenu-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: var(--stroke) solid rgba(0, 0, 0, 0.08);
}
.linemenu-actions .linemenu-btn {
  flex: 1;
  width: auto;
  text-align: center;
}
.linemenu-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.55;
  line-height: 1;
  padding: 4px 4px 2px;
}
.linemenu-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: max-content;
}
.linemenu-icon-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  cursor: pointer;
  padding: 0;
}
.linemenu-icon-btn .icon { width: 14px; height: 14px; color: inherit; }
.linemenu-icon-btn:hover { background: var(--menu-hover); }
.linemenu-icon-btn.is-on {
  background: var(--coin);
  color: var(--ink);
  border-color: var(--ink);
}
.linemenu-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  height: 32px;
  padding: 0 12px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  cursor: pointer;
  background: #FFFFFF;
  color: var(--ink);
  text-align: left;
}
.linemenu-btn:hover { background: var(--menu-hover); }
.linemenu-btn.is-on {
  background: var(--coin);
  color: var(--ink);
}
.linemenu-btn.is-clear {
  background: #FFFFFF;
  width: 100%;
}
.linemenu-btn.is-clear:hover { background: var(--menu-hover); }
.linemenu-btn.is-danger {
  background: #FFFFFF;
  color: var(--ink);
  width: 100%;
}
.linemenu-btn.is-danger:hover {
  background: #E8E8E8;
  border-color: #444444;
  color: #444444;
}
.linemenu-list-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  cursor: pointer;
}
.linemenu-list-btn:hover { background: var(--menu-hover); }
.linemenu-list-btn.is-on { background: var(--coin); }
.linemenu-list-preview {
  display: block;
  width: 22px;
  height: 10px;
  position: relative;
}
.linemenu-list-h {
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: var(--stroke);
  margin-top: calc(var(--stroke) / -2);
  background: var(--canvas);
}
.linemenu-list-btn.is-on .linemenu-list-h { background: #000000; }
.linemenu-fmt-btn {
  font-family: inherit;
  width: 32px;
  height: 32px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex: none;
}
.linemenu-fmt-btn:hover { background: var(--menu-hover); }
.linemenu-fmt-btn.is-on {
  background: var(--coin);
  color: var(--ink);
}
.linemenu-fmt-btn .fmt-a {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.linemenu-fmt-btn .fmt-b { font-weight: 700; font-size: 13px; line-height: 1; }
.linemenu-fmt-btn .fmt-i { font-style: italic; font-size: 13px; font-weight: 500; line-height: 1; }
.linemenu-fmt-btn .fmt-u { font-size: 12px; font-weight: 600; text-decoration: underline; line-height: 1; }
.linemenu-row-actions {
  gap: 6px;
}
.linemenu-action-btn {
  font-family: inherit;
  font-size: 14px; /* 3px larger than previous Delete */
  font-weight: 500;
  letter-spacing: -0.025em;
  height: 32px;
  padding: 0 10px;
  border: var(--stroke) solid var(--mute-deep);
  border-radius: var(--radius-btn);
  background: var(--mute);
  color: var(--ink);
  cursor: pointer;
  flex: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.linemenu-clear-btn:hover {
  background: var(--mute-deep);
  border-color: var(--mute-deep);
  color: var(--ink);
}
.linemenu-delete-btn:hover {
  background: #222222;
  border-color: #222222;
  color: #FFFFFF;
}

.confirm-menu {
  position: fixed; z-index: 75;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-menu);
  box-shadow: none;
  overflow: hidden;
  user-select: none;
  padding: 0;
  min-width: 168px;
}
/* Above .viewport-menu (z-index 80) so board submenu / delete confirm stay clickable */
#viewportRowMenu,
#viewportDeleteConfirm {
  z-index: 90;
}
.confirm-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border-radius: 0;
}
.confirm-menu-actions button,
.confirm-menu button {
  background: #FFFFFF;
  color: var(--ink);
  border: none;
  border-bottom: var(--stroke) solid var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  padding: 0 16px;
  cursor: pointer;
  border-radius: 0;
  min-width: 148px;
  height: 44px;
  line-height: 44px;
  text-align: left;
}
.confirm-menu-actions button:last-child,
.confirm-menu button:last-child { border-bottom: none; }
.confirm-menu-actions button:hover,
.confirm-menu button:hover { background: var(--menu-hover); }
.confirm-menu-actions button[data-act="cancel"],
.confirm-menu button[data-act="cancel"] { background: #FFFFFF; }
.confirm-menu-actions button[data-act="cancel"]:hover,
.confirm-menu button[data-act="cancel"]:hover { background: var(--menu-hover); }
.confirm-menu-actions button.is-danger,
.confirm-menu-actions button[data-act="delete"].is-danger,
.confirm-menu button.is-danger,
.confirm-menu button[data-act="delete"].is-danger {
  background: #FFFFFF;
  color: #444444;
}
.confirm-menu-actions button.is-danger:hover,
.confirm-menu-actions button[data-act="delete"].is-danger:hover,
.confirm-menu button.is-danger:hover,
.confirm-menu button[data-act="delete"].is-danger:hover {
  background: #E8E8E8;
}

.confirm-menu-actions button.is-inactive,
.confirm-menu-actions button:disabled,
.confirm-menu button.is-inactive,
.confirm-menu button:disabled {
  background: #FFFFFF;
  color: rgba(0, 0, 0, .28);
  cursor: default;
  pointer-events: none;
}
.confirm-menu-actions button.is-inactive:hover,
.confirm-menu-actions button:disabled:hover,
.confirm-menu button.is-inactive:hover,
.confirm-menu button:disabled:hover {
  background: #FFFFFF;
}

.confirm-menu-actions button.has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.confirm-menu-actions button.has-submenu.is-open {
  background: var(--coin-soft);
}
.submenu-chevron {
  font-size: 18px;
  line-height: 1;
  opacity: 0.55;
}

/* Snop header + board row submenu (same chrome) */
.snop-submenu .confirm-menu-actions button {
  color: #000000;
  background: #FFFFFF;
}
.snop-submenu .confirm-menu-actions button:hover {
  background: var(--menu-hover);
  color: #000000;
}
.snop-submenu .confirm-menu-actions button[data-act="duplicate"]:hover,
.snop-submenu .confirm-menu-actions button[data-act="print"]:hover,
.snop-submenu .confirm-menu-actions button[data-act="edit"]:hover,
.snop-submenu .confirm-menu-actions button[data-act="up"]:not(.is-inactive):not(:disabled):hover,
.snop-submenu .confirm-menu-actions button[data-act="down"]:not(.is-inactive):not(:disabled):hover {
  background: var(--coin-soft);
  color: #000000;
}
.snop-submenu .confirm-menu-actions button[data-act="up"].is-inactive,
.snop-submenu .confirm-menu-actions button[data-act="down"].is-inactive,
.snop-submenu .confirm-menu-actions button[data-act="up"]:disabled,
.snop-submenu .confirm-menu-actions button[data-act="down"]:disabled {
  color: #C8C8C8;
  background: #FFFFFF;
}
.snop-submenu .confirm-menu-actions button.is-primary,
.snop-submenu .confirm-menu-actions button[data-act="share"] {
  background: #000000;
  color: #FFFFFF;
}
.snop-submenu .confirm-menu-actions button.is-primary:hover,
.snop-submenu .confirm-menu-actions button[data-act="share"]:hover {
  background: var(--coin);
  color: #000000;
}
.snop-submenu .confirm-menu-actions button.is-danger,
.snop-submenu .confirm-menu-actions button[data-act="delete"].is-danger {
  background: #FFFFFF;
  color: #000000;
}
.snop-submenu .confirm-menu-actions button.is-danger:hover,
.snop-submenu .confirm-menu-actions button[data-act="delete"].is-danger:hover {
  background: #222222;
  color: #FFFFFF;
}
.snop-submenu .confirm-menu-actions button.has-submenu.is-open {
  background: var(--coin-soft);
  color: #000000;
}
.snop-submenu .confirm-menu-actions button.is-inactive:hover,
.snop-submenu .confirm-menu-actions button:disabled:hover {
  background: #FFFFFF;
  color: #C8C8C8;
}

/* ---------- snop style picker ---------- */
.style-picker {
  position: fixed;
  z-index: 76;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  width: min(300px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 24px));
  overflow: auto;
  box-sizing: border-box;
}
.style-picker[hidden] { display: none !important; }
.style-picker-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0;
  border: none;
}
.style-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-right: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
  border-radius: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  box-sizing: border-box;
  background-color: var(--swatch-bg, #fff);
  background-image: var(--swatch-pattern, none);
  background-size: var(--swatch-size, auto);
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  /* Isolate paint — prevents neon green hover “blitzer” */
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}
.style-swatch:focus,
.style-swatch:focus-visible { outline: none; }
.style-picker-grid > .style-swatch:nth-child(10n) { border-right: none; }
.style-picker-grid > .style-swatch:nth-last-child(-n+10) { border-bottom: none; }
.style-swatch:hover {
  box-shadow: inset 0 0 0 2px var(--ink);
  z-index: 1;
  position: relative;
}
.style-swatch.is-selected {
  box-shadow: inset 0 0 0 2px var(--coin);
  z-index: 2;
  position: relative;
}

.style-specials {
  border-top: var(--stroke) solid var(--ink);
}
.style-specials-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--canvas);
  padding: 6px 8px;
  border-bottom: var(--stroke) solid var(--ink);
}
#styleSpecialsGrid > .style-swatch:nth-last-child(-n+10) {
  border-bottom: none;
}

/* Animated specials — shared by swatches + snop cards */
.snop-anim-aurora,
.snop-anim-sunset,
.snop-anim-ocean,
.snop-anim-neon,
.snop-anim-stripes,
.snop-anim-stars,
.snop-anim-prism,
.snop-anim-pulse,
.snop-anim-ripple,
.snop-anim-flow {
  background-size: 200% 200% !important;
}
.snop-anim-aurora {
  background-image: linear-gradient(120deg, #F0F0F0, #E0E0E0, #D8D8D8, #F0F0F0) !important;
  animation: snopAurora 8s ease infinite;
}
.snop-anim-sunset {
  background-image: linear-gradient(140deg, #E8E8E8, #D0D0D0, #C8C8C8, #F0F0F0, #E8E8E8) !important;
  animation: snopAurora 10s ease infinite;
}
.snop-anim-ocean {
  background-image: linear-gradient(160deg, #D8D8D8, #B8B8B8, #C8C8C8, #A8A8A8, #D8D8D8) !important;
  animation: snopAurora 9s ease-in-out infinite;
}
.snop-anim-neon {
  background-image: linear-gradient(125deg, #1A1A1A, #3A3A3A, #5A5A5A, #2A2A2A, #1A1A1A) !important;
  animation: snopAurora 6s linear infinite;
}
.snop-anim-stripes {
  background-image: repeating-linear-gradient(
    -18deg,
    #F0F0F0 0 10px,
    #E0E0E0 10px 20px,
    #D0D0D0 20px 30px,
    #C8C8C8 30px 40px
  ) !important;
  background-size: 56px 56px !important;
  animation: snopStripes 4s linear infinite;
}
.snop-anim-stars {
  background-color: #1A1A1A !important;
  background-image:
    radial-gradient(#FFFFFF 1px, transparent 1.2px),
    radial-gradient(#888888 1px, transparent 1.2px),
    radial-gradient(#CCCCCC 0.8px, transparent 1px) !important;
  background-size: 22px 28px, 36px 40px, 18px 22px !important;
  animation: snopStars 5s linear infinite;
}
.snop-anim-prism {
  background-image: conic-gradient(from 0deg, #E0E0E0, #C0C0C0, #D8D8D8, #B8B8B8, #E0E0E0) !important;
  background-size: 200% 200% !important;
  animation: snopPrism 10s linear infinite;
}
.snop-anim-pulse {
  background-image: radial-gradient(circle at 30% 40%, #D8D8D8, #B0B0B0 40%, #707070 70%, #F0F0F0) !important;
  background-size: 160% 160% !important;
  animation: snopPulse 5s ease-in-out infinite;
}
.snop-anim-ripple {
  background-image: repeating-radial-gradient(circle at 50% 50%, #F0F0F0 0 8px, #E0E0E0 8px 16px, #D8D8D8 16px 24px) !important;
  background-size: 100% 100% !important;
  animation: snopRipple 7s ease-in-out infinite;
}
.snop-anim-flow {
  background-image: linear-gradient(90deg, #EAEAEA, #E0E0E0, #D8D8D8, #E8E8E8, #EAEAEA) !important;
  background-size: 300% 100% !important;
  animation: snopFlow 8s linear infinite;
}

@keyframes snopAurora {
  0% { background-position: 0% 40%; }
  50% { background-position: 100% 60%; }
  100% { background-position: 0% 40%; }
}
@keyframes snopStripes {
  0% { background-position: 0 0; }
  100% { background-position: 56px 56px; }
}
@keyframes snopStars {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 22px 28px, -36px 40px, 18px -22px; }
}
@keyframes snopPrism {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes snopPulse {
  0%, 100% { background-position: 30% 40%; background-size: 140% 140%; }
  50% { background-position: 70% 60%; background-size: 180% 180%; }
}
@keyframes snopRipple {
  0%, 100% { background-size: 100% 100%; }
  50% { background-size: 140% 140%; }
}
@keyframes snopFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.noto.has-style.snop-anim-aurora .noto-body,
.noto.has-style.snop-anim-sunset .noto-body,
.noto.has-style.snop-anim-ocean .noto-body,
.noto.has-style.snop-anim-neon .noto-body,
.noto.has-style.snop-anim-stripes .noto-body,
.noto.has-style.snop-anim-stars .noto-body,
.noto.has-style.snop-anim-prism .noto-body,
.noto.has-style.snop-anim-pulse .noto-body,
.noto.has-style.snop-anim-ripple .noto-body,
.noto.has-style.snop-anim-flow .noto-body {
  background: transparent;
}

.noto-menu {
  flex: none;
  width: 15px;
  height: var(--head-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #000000;
}
.noto-menu .line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.noto-menu.is-open { color: var(--accent); }

.linemenu-time {
  position: fixed;
  z-index: 71;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-menu);
  box-shadow: none;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
  max-width: min(300px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  box-sizing: border-box;
}
.linemenu-time[hidden] { display: none !important; }
.linemenu-time-sep {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.55;
  padding-top: 4px;
}
.linemenu-time-sep.is-muted {
  color: var(--ink);
  opacity: 0.45;
  font-weight: 500;
}

.linemenu-date-shortcuts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.linemenu-date-shortcuts button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  background: #FFFFFF;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  padding: 0 12px;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  text-align: left;
  border-radius: var(--radius-btn);
}
.linemenu-date-shortcuts button:hover { background: var(--menu-hover); }

.linemenu-date-agenda {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
}
.linemenu-date-agenda button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #FFFFFF;
  color: var(--ink);
  border: none;
  border-bottom: var(--stroke) solid var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 0 12px;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  text-align: left;
}
.linemenu-date-agenda button:last-child { border-bottom: none; }
.linemenu-date-agenda button:hover { background: var(--menu-hover); }
.linemenu-date-agenda button.is-selected {
  background: var(--coin);
  color: var(--ink);
}
.linemenu-date-agenda .dow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  opacity: .55;
  min-width: 28px;
}
.linemenu-date-agenda .dom {
  font-variant-numeric: tabular-nums;
}

.linemenu-date-custom {
  display: flex;
  gap: 4px;
  align-items: center;
}
.linemenu-date-custom input {
  font-family: inherit;
  font-size: 11px;
  border: var(--stroke) solid #000000;
  background: #fff;
  color: var(--ink);
  padding: 3px 5px;
  border-radius: var(--radius-btn);
  min-width: 0;
  width: 100%;
}
.linemenu-time-range {
  display: flex;
  align-items: center;
  gap: 6px;
}
.linemenu-hhmm {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border: var(--stroke) solid #000000;
  background: #fff;
  color: var(--ink);
  padding: 3px 5px;
  border-radius: var(--radius-btn);
  min-width: 0;
  text-align: center;
}
.linemenu-time-to {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.45;
}
.linemenu-time-tracking {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 2px;
}
.linemenu-hours-slider {
  flex: 1;
  min-width: 0;
  height: 18px;
  position: relative;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}
.linemenu-hours-track {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 50%;
  height: var(--stroke);
  margin-top: calc(var(--stroke) / -2);
  background: var(--mute);
  border-radius: 1px;
}
.linemenu-hours-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--ink);
  border: var(--stroke) solid var(--ink);
  box-sizing: border-box;
  pointer-events: none;
}
.linemenu-hours-slider:focus-visible {
  outline: none;
}
.linemenu-hours-slider:focus-visible .linemenu-hours-thumb {
  background: var(--accent);
  border-color: var(--accent);
}
.linemenu-hours-input {
  flex: none;
  width: 36px;
  font-family: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  border: var(--stroke) solid var(--mute);
  background: #F5F5F5;
  color: var(--ink);
  padding: 3px 4px;
  border-radius: var(--radius-btn);
  text-align: center;
}
.linemenu-hours-input:focus {
  outline: none;
  border-color: var(--mute-deep);
  background: #fff;
}
.linemenu-time-tracking-unit {
  flex: none;
  font-size: 11px;
  color: var(--mute-deep);
}

.linemenu-date-footer {
  display: flex;
  gap: 8px;
  overflow: visible;
  border-radius: 0;
}
.linemenu-date-footer button {
  flex: 1;
  background: var(--ink);
  color: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  padding: 0 12px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  border-radius: var(--radius-btn);
}
.linemenu-date-footer button:hover { background: var(--coin); color: var(--ink); }
.linemenu-date-footer button.is-muted {
  background: #FFFFFF;
  color: var(--ink);
}
.linemenu-date-footer button.is-muted:hover { background: var(--menu-hover); }

.linemenu-time-remove {
  background: #FFFFFF;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  padding: 0 12px;
  cursor: pointer;
  height: 36px;
  line-height: 36px;
  border-radius: var(--radius-btn);
  width: 100%;
}
.linemenu-time-remove:hover { background: #E8E8E8; color: #444444; border-color: #444444; }
.linemenu-time-remove[hidden] { display: none !important; }

/* ---------- popups ---------- */

.popmenu {
  position: fixed;
  z-index: 70;
  background: #FFFFFF;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-menu);
  box-shadow: none;
  padding: 0;
  min-width: 240px;
  overflow: hidden;
}
.popmenu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: var(--stroke) solid var(--ink);
}
.popmenu-row:last-child { border-bottom: none; }
.popmenu-row:hover { background: var(--menu-hover); }
/* Account popup — hot pink card, two columns (login | contact) */
.account-overlay {
  z-index: 120;
  background: rgba(0, 0, 0, 0.28);
}
.account-modal-card {
  max-width: min(720px, calc(100vw - 32px));
  width: 100%;
  padding: 28px 28px 24px;
  background: #2A2A2A;
  border: var(--stroke) solid #000;
  color: #000;
  animation: share-snopped-pop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1) both;
  box-sizing: border-box;
}
.account-guest-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(1.55rem, 3.8vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #000;
  line-height: 1.15;
}
/* Match the two boxes below: same columns + 14px gap */
.account-guest-line.is-claimed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: center;
  justify-content: stretch;
}
.account-guest-heart {
  font-size: 1em;
  line-height: 1;
}
.account-avatar-btn {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.account-guest-line.is-claimed .account-avatar-btn {
  justify-self: end; /* right edge of left column / left box */
}
.account-avatar-btn:hover {
  background: rgba(0, 0, 0, 0.08);
}
.account-avatar-btn.is-picking {
  outline: 2px solid #000;
  outline-offset: 2px;
}
.account-name-inline {
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 1em;
  letter-spacing: inherit;
  color: #000;
  text-align: center;
  min-width: 4ch;
  max-width: min(70vw, 360px);
  outline: none;
  box-sizing: border-box;
}
.account-guest-line.is-claimed .account-name-inline {
  justify-self: start; /* left edge of right column / right box */
  text-align: left;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.account-name-inline:hover {
  border-bottom-color: rgba(0, 0, 0, 0.25);
}
.account-name-inline:focus {
  border-bottom-color: #000;
}
.account-guest-line.is-claimed #accountGuestHeart,
.account-guest-line.is-claimed #accountGuestLabel {
  display: none;
}
.account-guest-line:not(.is-claimed) #accountAvatarBtn,
.account-guest-line:not(.is-claimed) #accountNameInline {
  display: none !important;
}
.account-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  box-sizing: border-box;
  align-content: start;
}
.account-icon-cell {
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  border: var(--stroke) solid transparent;
  border-radius: var(--radius-btn);
  background: #fff;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  box-sizing: border-box;
}
.account-icon-cell:hover {
  background: var(--coin-soft);
}
.account-icon-cell.is-selected {
  border-color: #000;
  background: var(--coin-soft);
}
.claim-panel[data-claim-step="icons"] {
  gap: 0;
  padding: 0;
  overflow: hidden;
  min-width: 0;
}
.account-saved-line {
  margin: 8px 0 0;
  text-align: center;
  font-size: 16px;
  letter-spacing: -0.025em;
  color: #000;
  opacity: 1;
  line-height: 1.35;
}
.account-modal-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
  align-items: stretch;
}

.account-claim-box {
  position: relative;
  height: 340px;
  border: var(--stroke) solid #000;
  border-radius: var(--radius-btn);
  background: #fff;
  padding: 16px 14px;
  box-sizing: border-box;
  overflow: hidden;
}
.claim-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.claim-panel.is-active {
  display: flex;
}
.claim-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.25;
}
.claim-sub {
  margin: 0;
  font-size: 14px;
  letter-spacing: -0.025em;
  color: var(--ink);
  opacity: 0.6;
  line-height: 1.4;
}
.claim-sub-strong {
  font-size: 16px;
  color: #000;
  opacity: 1;
}
.claim-panel[data-claim-step="email"] {
  gap: 8px;
}
.claim-sub-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 10px; /* extra space after “Keep your snops forever.” */
}
.claim-sub-stack .claim-sub {
  margin: 0;
  line-height: 1.35;
}
.claim-input {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -0.025em;
  padding: 12px 14px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
}
.claim-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.claim-continue {
  margin-top: auto;
  width: 100%;
  height: 44px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  cursor: pointer;
}
.claim-continue:hover {
  background: var(--coin);
  color: var(--ink);
}
.claim-continue:disabled {
  opacity: 0.45;
  cursor: default;
}
.claim-error {
  margin: 0;
  font-size: 13px;
  color: #444444;
  line-height: 1.3;
}
.claim-code-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.claim-resend {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.4;
  color: #000;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.claim-resend:hover {
  color: var(--coin);
}
.claim-resend:disabled {
  opacity: 0.45;
  cursor: default;
  color: #000;
}
.claim-code-digit {
  width: 100%;
  aspect-ratio: 1;
  max-height: 48px;
  box-sizing: border-box;
  text-align: center;
  font-family: inherit;
  font-size: 20px;
  letter-spacing: 0;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  padding: 0;
}
.claim-code-digit:focus {
  outline: 2px solid var(--coin);
  outline-offset: 1px;
}
.claim-welcome {
  margin: auto 0;
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.2;
}
.claim-signout {
  background: #fff;
  color: var(--ink);
}
.claim-signout:hover {
  background: var(--coin);
}
.claim-signedin-main,
.claim-signout-confirm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.claim-signedin-main[hidden],
.claim-signout-confirm[hidden] {
  display: none !important;
}
.claim-signout-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.claim-signout-actions .claim-continue {
  margin-top: 0;
}
.claim-signout-cancel {
  background: #fff;
  color: var(--ink);
}
.claim-signout-cancel:hover {
  background: var(--menu-hover);
  color: var(--ink);
}
.claim-signout-confirm-btn {
  background: var(--ink);
  color: #fff;
}
.claim-signout-confirm-btn:hover {
  background: var(--coin);
  color: var(--ink);
}

.account-contact-box {
  border: var(--stroke) solid #000;
  border-radius: var(--radius-btn);
  background: #fff;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 340px;
  box-sizing: border-box;
}
.account-contact-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.account-contact-lead {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.025em;
  color: #000;
  opacity: 1;
  line-height: 1.4;
}
.account-contact-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-contact-btn {
  width: 100%;
  height: 42px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: -0.025em;
  cursor: pointer;
  text-align: left;
  padding: 0 14px;
}
.account-contact-btn:hover,
.account-contact-btn.is-active {
  background: var(--coin-soft);
}
.account-contact-compose {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-contact-compose[hidden] {
  display: none !important;
}
.account-contact-body {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: -0.025em;
  line-height: 1.4;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 10px 12px;
  resize: vertical;
  min-height: 72px;
  background: #fff;
  color: var(--ink);
}
.account-contact-hint {
  margin: 0;
  font-size: 13px;
  opacity: 0.55;
  line-height: 1.35;
}
.account-love {
  margin: 16px 0 0;
  text-align: center;
  font-size: 16px;
  letter-spacing: -0.025em;
  color: #000;
  opacity: 1;
  line-height: 1.35;
}

/* Post-claim welcome: heart beat → small white popup */
.claim-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: transparent;
}
.claim-welcome-heart {
  font-size: clamp(1.55rem, 3.8vw, 2.1rem);
  line-height: 1;
  transform-origin: center center;
  animation: claim-welcome-beat 0.55s ease-in-out 2;
  will-change: transform;
}
@keyframes claim-welcome-beat {
  0%, 100% { transform: scale(1); }
  28% { transform: scale(1.38); }
  52% { transform: scale(1); }
}
.claim-welcome-card {
  background: #fff;
  border: var(--stroke) solid #000;
  border-radius: var(--radius-card);
  padding: 16px 26px;
  color: #000;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.3;
  text-align: center;
  box-shadow: none;
  animation: share-snopped-pop 0.35s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.claim-welcome-card.is-out {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .claim-welcome-heart { animation: none; }
  .claim-welcome-card { animation: none; }
}

@media (max-width: 640px) {
  .account-modal-card {
    padding: 22px 16px 18px;
    max-height: min(92vh, 900px);
    overflow-y: auto;
  }
  .account-modal-cols {
    grid-template-columns: 1fr;
  }
  .account-claim-box,
  .account-contact-box {
    min-height: 0;
    height: auto;
  }
  .account-claim-box {
    height: 300px;
  }
}

/* ---------- Snop my life — independent bottom overlay ---------- */

:root {
  --org-rail-w: 112px;
  --sheet-dur: .42s;
  --dock-ease: cubic-bezier(.22, 1, .36, 1);
}
body.sheet-open {
  --org-h: 50vh;
}

.sheet-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--org-h, 50vh);
  z-index: 45;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--canvas);
  border-top: var(--stroke) solid var(--ink);
  box-sizing: border-box;
  transform: translateY(100%);
  transition:
    opacity var(--sheet-dur) var(--dock-ease),
    transform var(--sheet-dur) var(--dock-ease),
    height var(--sheet-dur) var(--dock-ease);
}
body.sheet-open .sheet-host {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
body.sheet-open.sheet-closing .sheet-host {
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
}
.time-view,
.tasks-view.sheet-panel,
.friends-view.sheet-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  z-index: 2;
  box-sizing: border-box;
  padding-right: calc(var(--board-pad) + var(--org-rail-w) + 8px);
  border: none;
}
.time-view[hidden],
.tasks-view[hidden],
.friends-view[hidden] { display: none !important; }
.friends-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.friends-empty {
  font-size: 14px;
  letter-spacing: -0.025em;
  color: var(--ink);
  opacity: 0.55;
}
.org-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 8;
  cursor: ns-resize;
  touch-action: none;
  display: none;
}
body.sheet-open .org-resize-handle { display: block; }
.org-resize-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 36px;
  height: 3px;
  margin-left: -18px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.22);
}
body.organizer-resizing {
  cursor: ns-resize;
  user-select: none;
}
body.organizer-resizing .sheet-host {
  transition: none;
}
body.organizer-resizing .org-resize-handle::after {
  background: var(--coin);
}
/* Submenu rail: My Week / My Tasks / My Friends */
.org-rail {
  position: absolute;
  top: 14px;
  right: var(--board-pad);
  bottom: 14px;
  width: var(--org-rail-w);
  z-index: 7;
  display: none;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
  padding: 0;
  box-sizing: border-box;
}
body.sheet-open .org-rail { display: flex; }
.org-mode-btn {
  width: 100%;
  height: 40px;
  padding: 0 8px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  cursor: pointer;
  flex: none;
  box-sizing: border-box;
}
.org-mode-btn:hover {
  background: var(--coin-soft);
}
.org-mode-btn.is-on {
  background: var(--coin);
  color: var(--ink);
  border-color: var(--ink);
}
.dock-row {
  display: flex;
  align-items: center;
  gap: var(--dock-gap, 8px);
  flex: none;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
}
.bottombar:hover .dock-row,
.bottombar:focus-within .dock-row,
.bottombar.is-open .dock-row {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  height: auto;
}
.dock-cluster {
  display: flex;
  align-items: center;
  gap: inherit;
  min-width: 0;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 40px;
}
.bottombar:hover .dock-cluster,
.bottombar:focus-within .dock-cluster,
.bottombar.is-open .dock-cluster {
  align-items: stretch;
}
.time-views {
  display: flex;
  gap: 2px;
}
.time-view-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  height: 36px;
  padding: 0 14px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
}
.time-view-btn:hover { background: var(--menu-hover); }
.time-view-btn.is-on {
  background: var(--coin);
  color: var(--ink);
}
.time-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.time-nav-btn,
.time-nav-today {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  height: 36px;
  padding: 0 14px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  color: var(--ink);
  cursor: pointer;
}
.time-nav-btn { min-width: 36px; padding: 0; font-size: 18px; line-height: 1; }
.time-nav-btn:hover,
.time-nav-today:hover { background: var(--menu-hover); }
.time-nav-today {
  background: var(--ink);
  color: #FFFFFF;
}
.time-nav-today:hover {
  background: var(--coin);
  color: var(--ink);
}
.time-nav-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #000;
  margin-left: 8px;
  white-space: nowrap;
}
.time-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.time-body.org-scroll {
  --org-view-pad: 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #000 transparent;
}
body.sheet-open .time-body.org-scroll,
body.sheet-open .tasks-scroll {
  flex: 1;
  min-height: 0;
  height: auto;
}

/* Stacked weeks for footer organizer */
.org-weeks {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: min-content;
  /* Equal inset above first / below last week */
  padding-top: var(--org-view-pad, 28px);
  padding-bottom: var(--org-view-pad, 28px);
  box-sizing: border-box;
}
.org-week {
  flex: none;
  padding: 0 var(--board-pad);
  border: none;
  box-sizing: border-box;
}
.org-week-cols {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 8px;
  min-height: 0;
}
.org-time-gutter {
  flex: 0 0 28px;
  width: 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  user-select: none;
}
.org-time-gutter-head {
  flex: none;
  height: 33px; /* match .org-day-head */
  box-sizing: border-box;
}
.org-time-gutter-grid {
  flex: none;
  height: calc(var(--org-visible-hours, 18) * var(--org-hour-px, 13px));
  position: relative;
}
.org-time-gutter-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-right: 4px;
  color: rgba(0, 0, 0, 0.45);
}
.org-time-gutter-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateY(-0.35em);
}
.org-time-gutter-label.is-end {
  position: absolute;
  right: 4px;
  bottom: 0;
  transform: translateY(0.35em);
}
.org-time-gutter-allday {
  flex: 1 1 auto;
  min-height: 88px;
  max-height: 140px;
}
.org-day-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  background: #FFFFFF;
  overflow: hidden;
}
.org-day-col.is-weekend { background: var(--canvas); }
.org-day-col.is-today { outline: 2px solid var(--coin); outline-offset: -2px; }
.org-day-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  height: 33px;
  padding: 6px 8px;
  border-bottom: var(--stroke) solid var(--ink);
  font-size: 12px;
  letter-spacing: -0.025em;
  box-sizing: border-box;
}
/* All-day strip above hours — drop target; no "Notes" label */
.org-day-allday {
  flex: 1 1 auto;
  min-height: 88px;
  max-height: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: var(--stroke) solid var(--ink);
  background: #FFFFFF;
  overflow: hidden;
  padding: 4px 4px 6px;
  box-sizing: border-box;
}
.org-day-col.is-weekend .org-day-allday {
  background: var(--canvas);
}
.org-allday-list {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}
.org-allday-item {
  --org-block-bg: var(--coin-soft);
  --org-block-ink: #000000;
  --org-block-pattern: none;
  --org-block-pattern-size: auto;
  position: relative;
  flex: none;
  min-height: 24px;
  padding: 2px 18px 2px 8px;
  border: var(--stroke) solid var(--ink);
  border-radius: 2px;
  background-color: var(--org-block-bg);
  background-image: var(--org-block-pattern);
  background-size: var(--org-block-pattern-size);
  color: var(--org-block-ink);
  cursor: grab;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.org-allday-item[class*="snop-anim-"] {
  background-color: transparent;
}
.org-allday-item.has-menu { padding-right: 18px; }
.org-allday-item.has-check { padding-right: 22px; }
.org-allday-item.has-check.has-menu { padding-right: 38px; }
.org-allday-item.has-check .org-block-check { right: 16px; }
.org-allday-item.is-done {
  opacity: 0.55;
}
.org-allday-item.is-done .org-allday-text { text-decoration: line-through; }
.org-allday-item.is-dragging { opacity: 0.55; cursor: grabbing; }
.org-allday-item.is-selected {
  outline: 3px solid #000000;
  outline-offset: -3px;
  border-color: #000000;
  z-index: 20;
}
.org-allday-item.is-viewer-hl,
.org-block.is-viewer-hl {
  outline: 3px solid #000000;
  outline-offset: -2px;
  z-index: 4;
}
.org-allday-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: -0.025em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-day-allday .time-day-journal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow-y: auto;
}
.org-day-grid-wrap {
  position: relative;
  /* Visible day window 06:00–24:00 */
  height: calc(var(--org-visible-hours, 18) * var(--org-hour-px, 13px));
  overflow: hidden;
  flex: none;
}
.org-day-grid {
  position: relative;
  height: calc(var(--org-visible-hours, 18) * var(--org-hour-px, 13px));
  transform: none;
}
.org-hour-row {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  pointer-events: none;
}
.org-hour-slot {
  position: absolute;
  inset: 0;
  /* Only accept drops while dragging a board line — never steal block clicks */
  pointer-events: none;
}
.org-block {
  --org-block-bg: var(--coin-soft);
  --org-block-ink: #000000;
  --org-block-pattern: none;
  --org-block-pattern-size: auto;
  position: absolute;
  left: 2px;
  right: 2px;
  z-index: 2;
  background-color: var(--org-block-bg);
  background-image: var(--org-block-pattern);
  background-size: var(--org-block-pattern-size);
  color: var(--org-block-ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 2px;
  overflow: hidden;
  box-sizing: border-box;
  cursor: grab;
  padding: 2px 18px 2px 8px;
  display: flex;
  flex-direction: column;
  min-height: 14px;
}
/* Animated specials on organizer blocks (same classes as snops) */
.org-block[class*="snop-anim-"] {
  background-color: transparent;
}
.org-block.has-menu { padding-right: 18px; }
.org-block.has-check { padding-right: 22px; }
.org-block.has-check.has-menu { padding-right: 38px; }
.org-block.is-done { opacity: 0.55; }
.org-block.is-done .org-block-text { text-decoration: line-through; }
.org-block.is-dragging { opacity: 0.55; cursor: grabbing; }
.org-block.is-selected {
  outline: 3px solid #000000;
  outline-offset: -3px;
  border-color: #000000;
  z-index: 20;
}
.org-block-menu {
  position: absolute;
  right: 0;
  top: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  pointer-events: auto;
}
.org-block-menu .line-menu-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.org-block-menu:hover { opacity: 0.7; }
.org-block.has-check .org-block-check { right: 16px; }
.org-block-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.org-block-time {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.org-block-text {
  font-size: 11px;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.org-block-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: grab;
}
.org-block-check {
  position: absolute;
  right: 1px;
  top: 1px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  pointer-events: auto;
}
.org-block-check .icon {
  width: 14px;
  height: 14px;
  color: inherit;
  pointer-events: none;
}
.org-block-check:hover { opacity: 0.75; }
.org-resize {
  position: absolute;
  left: 0;
  right: 0;
  height: 6px;
  z-index: 3;
  cursor: ns-resize;
}
/* Keep top resize clear of the checkbox hit target */
.org-resize.is-start { top: 0; right: 22px; }
.org-block:not(.has-check) .org-resize.is-start { right: 0; }
.org-resize.is-end { bottom: 0; }
.org-drop-preview {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.08);
  border: 3px solid #000000;
  border-radius: 2px;
  box-sizing: border-box;
}
.org-card-drop-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  pointer-events: none;
  padding: 12px 18px;
  background: var(--coin);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
  box-shadow: none;
  animation: orgCardDropHintIn .18s ease-out;
}
.org-card-drop-hint[hidden] { display: none !important; }
@keyframes orgCardDropHintIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
body.dragging-org-line .org-hour-slot { pointer-events: auto; }

/* Week — all 7 days visible, no horizontal scroll */
.time-week {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 21.25px var(--board-pad) 24px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--board-pad);
  box-sizing: border-box;
}
.time-day-col {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
}
.time-day-col-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--stroke) solid #000000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}
.time-day-col.is-weekend .time-day-col-box {
  background: var(--chip-deep);
}
.time-day-col.is-weekend .time-day-timed,
.time-day-col.is-weekend .time-day-journal {
  background: #E4E4E4;
}
.time-day-col.is-today .time-day-head {
  background: var(--accent);
}
.time-day-head {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #000000;
  background: #FFFFFF;
  min-height: var(--head-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: var(--stroke) solid #000000;
  cursor: pointer;
}
.time-day-head-date {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 12.5px;
}
.time-day-timed {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}
.time-week-grid-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.time-week-grid-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-week-grid {
  position: relative;
  /* height set inline: 24 * WEEK_HOUR_PX */
}
.time-week-grid .time-hour-label {
  width: 22px;
  padding: 1px 2px 0 3px;
  font-size: 8px;
  letter-spacing: 0;
}
.time-week-grid .time-now-line {
  left: 22px;
}
.time-week-grid .time-block {
  left: 24px;
  right: 3px;
  padding: 1px 4px;
  font-size: 10px;
  line-height: 1.2;
}
.time-week-grid .time-block.is-compact .time-block-time {
  font-size: 9px;
}
.time-block-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-event {
  flex: none;
  font-size: 12px;
  line-height: 1.3;
  padding: 6px 8px;
  border-left: 2px solid var(--accent);
  background: rgba(0, 0, 0, 0.07);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}
.time-event-time {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #000;
  opacity: 0.7;
}
.time-event-text {
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.time-event.is-now {
  background: var(--accent);
}
.time-day-journal {
  flex: none;
  min-height: 96px;
  max-height: 52%;
  overflow-y: auto;
  border-top: var(--stroke) solid #000000;
  padding: 4px 1px 6px;
  background: var(--surface);
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.time-day-journal::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-day-journal-panel {
  flex: none;
  min-height: 120px;
  max-height: 220px;
  display: flex;
  flex-direction: column;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  overflow: hidden;
}
.time-day-journal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 0;
  scrollbar-width: none;
}
.time-day-journal-body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-day-journal-body .line {
  padding-left: 0;
  padding-right: 1px;
  gap: 1.5px;
}
.time-journal-starter .line-text {
  min-height: var(--row-h);
}

/* Day detail */
.time-day-view {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0 var(--board-pad) 12px;
  gap: 10px;
}
.time-day-grid-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  position: relative;
  scrollbar-width: none;
}
.time-day-grid-wrap::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.time-day-grid {
  position: relative;
  height: calc(24 * 48px); /* 48px per hour */
}
.time-hour-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: flex;
}
.time-hour-row.is-now {
  background: rgba(0, 0, 0, 0.08);
}
.time-hour-label {
  flex: none;
  width: 52px;
  padding: 2px 6px 0 8px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(0,0,0,.45);
}
.time-hour-slot { flex: 1; }
.time-now-line {
  position: absolute;
  left: 52px;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 3;
  pointer-events: none;
}
.time-block {
  position: absolute;
  left: 56px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.10);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.3;
}
.time-block-time { font-size: 10px; font-weight: 600; opacity: .7; }

/* Month */
.time-month {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px var(--board-pad) 16px;
}
.time-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  max-width: 920px;
  margin: 0 auto;
}
.time-month-dow {
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  padding: 4px;
  color: rgba(0,0,0,.5);
}
.time-month-cell {
  aspect-ratio: 1.2;
  border: var(--stroke) solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.time-month-cell.is-muted { opacity: 0.35; }
.time-month-cell.is-weekend { background: var(--chip-deep); }
.time-month-cell.is-today { outline: 2px solid var(--accent); outline-offset: -1px; }
.time-month-cell-num { font-size: 12px; font-weight: 600; }
.time-month-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Year */
.time-year {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 14px var(--board-pad) 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--board-pad);
}
.time-year-month {
  border: var(--stroke) solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  padding: 10px;
  cursor: pointer;
}
.time-year-month:hover { background: var(--chip-deep); }
.time-year-month-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  margin-bottom: 8px;
}
.time-year-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.time-year-mini span {
  aspect-ratio: 1;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.time-year-mini span.is-today { background: var(--accent); font-weight: 600; }
.time-year-mini span.has-entry { box-shadow: none; }
.time-year-mini span.is-out { opacity: 0.25; }

@media (max-width: 900px) {
  .time-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* legacy planner hooks (dnd may still look for .pcol) */
.planner-cols { display: none; }

/* ---------- tasks overview (bottom sheet, same chrome as My Time) ---------- */

.tasks-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 12px var(--board-pad) 16px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--board-pad);
  box-sizing: border-box;
}
.tasks-empty {
  color: rgba(0, 0, 0, 0.45);
  font-size: 13.75px;
  padding: 24px 0;
  flex: none;
}
.tasks-col {
  flex: none;
  /* ~3 columns: side pads + 2 gaps = 4× board-pad (same as left window edge) */
  width: calc((100% - 2 * var(--board-pad)) / 3);
  min-width: calc((100% - 2 * var(--board-pad)) / 3);
  max-width: calc((100% - 2 * var(--board-pad)) / 3);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
  padding: 0;
}
.tasks-col-box {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--stroke) solid #000000;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-sizing: border-box;
}
.tasks-col-head {
  flex: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #000000;
  background: #FFFFFF;
  min-height: var(--head-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-bottom: var(--stroke) solid #000000;
}
.tasks-col-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 10px;
  overscroll-behavior: contain;
  background: var(--surface);
}
.tasks-col-empty {
  color: rgba(0, 0, 0, 0.35);
  font-size: 13px;
  padding: 4px 2px;
}
.tasks-noto {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.tasks-noto-title.noto-title,
button.tasks-noto-title {
  flex: none;
  width: 100%;
  max-width: 100%;
  background: none;
  border: none;
  padding: 4px 2px 6px;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  color: var(--ink-header);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 0;
}
button.tasks-noto-title:hover {
  color: var(--accent);
}
.tasks-noto-body {
  padding: 0;
  background: transparent;
}
.tasks-noto-body .line { max-width: 100%; }

/* ---------- dock ---------- */

.bottombar {
  --dock-ease: cubic-bezier(.22, 1, .36, 1);
  --dock-dur: .38s;
  --dock-gap: 8px;
  --dock-section-w: 92px;
  --dock-section-w-open: 220px;
  --sheet-dur: .42s;
  --dock-pad-x: var(--board-pad);
  --dock-pad-y: 14px;
  position: absolute; bottom: 0; left: 0; right: 0;
  height: var(--dock-h-collapsed);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  /* Equal inset above and below controls / boxes */
  padding: var(--dock-pad-y) var(--dock-pad-x);
  user-select: none;
  background: var(--canvas);
  border-top: var(--stroke) solid var(--ink);
  overflow: hidden;
  z-index: 40;
  box-sizing: border-box;
  transition:
    height var(--dock-dur) var(--dock-ease),
    padding var(--dock-dur) var(--dock-ease);
}
.bottombar:hover,
.bottombar:focus-within,
.bottombar.is-open {
  height: var(--dock-h);
  justify-content: center;
  padding: var(--dock-pad-y) var(--dock-pad-x);
}

.dock-filter-title {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.dock-filter-title .filter-badges {
  margin-left: 0;
}
/* Match .dock-list open/close so Filter tiles animate like Recent/Browse/Trash */
.dock-filter-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
  flex: 0 1 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  overflow: hidden;
  transition:
    opacity .24s ease .12s,
    transform .32s var(--dock-ease) .08s,
    flex-basis var(--dock-dur) var(--dock-ease);
}
.bottombar:hover .dock-filter-body,
.bottombar:focus-within .dock-filter-body,
.bottombar.is-open .dock-filter-body {
  flex: 1 1 auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dock-emoji-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}
.dock-emoji-heart-btn {
  width: 22px;
  height: 22px;
  font-size: 16px;
  border-width: 0;
  background: transparent;
}

/* Emoji dock — scrollable grid, same open animation as lists */
.dock-emoji-body {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  min-height: 0;
  flex: 0 1 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #000000 transparent;
  padding-right: 4px;
  transition:
    opacity .24s ease .12s,
    transform .32s var(--dock-ease) .08s,
    flex-basis var(--dock-dur) var(--dock-ease);
}
.dock-emoji-body::-webkit-scrollbar { width: 6px; }
.dock-emoji-body::-webkit-scrollbar-track { background: transparent; }
.dock-emoji-body::-webkit-scrollbar-thumb { background: #000000; }
.bottombar:hover .dock-emoji-body,
.bottombar:focus-within .dock-emoji-body,
.bottombar.is-open .dock-emoji-body {
  flex: 1 1 auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow-y: auto;
}
.dock-emoji-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  background: transparent;
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  box-sizing: border-box;
  appearance: none;
  user-select: none;
  -webkit-user-select: none;
}
.dock-emoji-btn:hover,
.dock-emoji-btn:focus-visible {
  border-color: var(--ink);
  outline: none;
  background: #fff;
}
.dock-emoji-btn:active { cursor: grabbing; }
.dock-emoji-ghost {
  position: fixed;
  z-index: 10060;
  pointer-events: none;
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}
.dock-section {
  position: static;
  flex: 0 0 auto;
  width: var(--dock-section-w);
  height: 40px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 12px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  overflow: hidden;
  transition:
    height var(--dock-dur) var(--dock-ease),
    width var(--dock-dur) var(--dock-ease),
    padding var(--dock-dur) var(--dock-ease);
}
.bottombar:hover .dock-section,
.bottombar:focus-within .dock-section,
.bottombar.is-open .dock-section {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100%;
  padding: 10px 12px;
}

.dock-list::-webkit-scrollbar { width: 6px; }
.dock-list::-webkit-scrollbar-track { background: transparent; }
.dock-list::-webkit-scrollbar-thumb { background: #000000; }

.dock-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: #000000;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  white-space: nowrap;
  transition:
    height var(--dock-dur) var(--dock-ease),
    margin var(--dock-dur) var(--dock-ease);
}
.bottombar:hover .dock-title,
.bottombar:focus-within .dock-title,
.bottombar.is-open .dock-title {
  height: auto;
  margin-bottom: 10px;
}

.dock-add { background: none; border: none; cursor: pointer; color: #000000; display: flex; padding: 0; }
.dock-add:hover { color: #000000; }

/* Keep content in the tree so open can fade/slide — clipped by section overflow when collapsed. */
.dock-search {
  display: flex;
  align-items: center;
  gap: 7.5px;
  border-bottom: var(--stroke) solid transparent;
  padding: 0;
  margin: 0;
  color: #000000;
  flex: none;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity .22s ease .1s,
    transform .3s var(--dock-ease) .06s,
    max-height var(--dock-dur) var(--dock-ease),
    margin var(--dock-dur) var(--dock-ease),
    padding var(--dock-dur) var(--dock-ease),
    border-color .2s ease .12s;
}
.bottombar:hover .dock-search,
.bottombar:focus-within .dock-search,
.bottombar.is-open .dock-search {
  max-height: 40px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border-bottom-color: var(--line);
  padding: 0 0 5px;
  margin-bottom: 10px;
}
.dock-search input {
  flex: 1; background: none; border: none; outline: none;
  color: #000000; font-family: inherit; font-size: 13.75px; line-height: 20px;
}

.dock-list {
  display: flex;
  overflow-y: hidden;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  padding-right: 16px;
  flex: 0 1 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #000000 transparent;
  transition:
    opacity .24s ease .12s,
    transform .32s var(--dock-ease) .08s,
    flex-basis var(--dock-dur) var(--dock-ease);
}
.bottombar:hover .dock-list,
.bottombar:focus-within .dock-list,
.bottombar.is-open .dock-list {
  flex: 1 1 auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  overflow-y: auto;
}

.dock-chip {
  --dock-chip-bg: #FFFFFF;
  --dock-chip-ink: #000000;
  --dock-chip-pattern: none;
  --dock-chip-pattern-size: auto;
  background-color: var(--dock-chip-bg);
  background-image: var(--dock-chip-pattern);
  background-size: var(--dock-chip-pattern-size);
  color: var(--dock-chip-ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 18px;
  text-align: left;
  flex: none;
  min-height: 28px;
  box-sizing: border-box;
}
.dock-chip.has-style[class*="snop-anim-"] {
  background-color: transparent;
}
.dock-chip .icon,
.dock-chip .dock-drag {
  color: inherit;
  opacity: 1;
  width: 16px;
  height: 16px;
  flex: none;
}
.dock-chip .chip-label,
.dock-chip .chip-sub {
  color: inherit;
}
.dock-drag { cursor: grab; display: flex; align-items: center; justify-content: center; }
.dock-chip-hit {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7.5px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.dock-chip.muted {
  background: var(--canvas);
  color: #000000;
  border: var(--stroke) solid #000000;
}
.dock-chip.muted .chip-sub { color: #000000; }
.dock-chip.is-trash {
  background: var(--canvas);
  color: rgba(0, 0, 0, 0.38);
}
.dock-chip.is-trash .dock-drag { color: rgba(0, 0, 0, 0.32); opacity: 1; }
.dock-chip.is-trash .chip-label { color: inherit; }
.dock-chip .chip-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-chip .chip-sub { font-size: 11.25px; font-weight: 500; }

.dock-empty-btn {
  display: block;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  max-height: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  flex: none;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity .22s ease .1s,
    transform .3s var(--dock-ease) .06s,
    max-height var(--dock-dur) var(--dock-ease),
    margin var(--dock-dur) var(--dock-ease);
}
.bottombar:hover .dock-empty-btn,
.bottombar:focus-within .dock-empty-btn,
.bottombar.is-open .dock-empty-btn {
  max-height: 24px;
  margin: 0 0 8px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.dock-empty-btn:hover:not(:disabled) { color: #000000; }
.dock-empty-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.bottombar:hover .dock-empty-btn:disabled,
.bottombar:focus-within .dock-empty-btn:disabled,
.bottombar.is-open .dock-empty-btn:disabled {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .bottombar,
  .dock-section,
  .dock-title,
  .dock-search,
  .dock-list,
  .dock-filter-body,
  .dock-empty-btn {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- toast ---------- */

.toast {
  position: fixed; bottom: calc(var(--dock-h-collapsed) + 10px); left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  font-size: 16px; font-weight: 500; padding: 12px 16px;
  border-radius: var(--radius-btn);
  box-shadow: none; z-index: 140;
}

.confetti-layer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 200;
}
.confetti-layer.confetti-radial {
  z-index: 220;
}

.done-toast {
  position: fixed;
  bottom: calc(var(--dock-h-collapsed) + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--coin);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  font-size: 16px;
  font-weight: 500;
  padding: 8px 10px 8px 14px;
  border-radius: var(--radius-btn);
  z-index: 91;
  white-space: nowrap;
  box-shadow: none;
}
.done-toast[hidden] { display: none !important; }
.done-toast-msg { line-height: 1.2; }
.done-toast-undo {
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  text-transform: none;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 0 12px;
  height: 32px;
  cursor: pointer;
  background: #FFFFFF;
  color: var(--ink);
}
.done-toast-undo:hover { background: var(--menu-hover); }

/* ---------- share view / landing ---------- */

/* Full chrome on landing (header + footer). Compact share-only mode hides dock. */
body.share-view:not(.share-landing) .bottombar,
body.share-view:not(.share-landing) .topbar-viewport,
body.share-view:not(.share-landing) .topbar-new,
body.share-view:not(.share-landing) .viewport-dots { display: none; }
body.share-view .topbar-pager { display: none; }
body.share-view:not(.share-landing) .board-wrap { bottom: 0; }
body.share-view:not(.share-landing) .line-handle,
body.share-view:not(.share-landing) .line-menu { visibility: hidden; }

/* Share landing chrome overlays a real board-grid snop */
body.share-landing .board-wrap { overflow: auto; }
.share-landing-chrome {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: visible;
}
.share-landing-banner {
  width: 100%;
  padding: 28px 20px 8px;
  text-align: center;
  animation: share-land-in 0.55s ease-out;
}
.share-landing-copytext {
  opacity: 1;
}
.share-landing-copytext.is-fading {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.share-landing-copy {
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  text-align: center;
  animation: share-land-copy-in 0.55s ease-out both;
  max-width: min(90vw, 520px);
  width: max-content;
}
.share-landing-hero {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  line-height: 1.1;
}
.share-landing-sub,
.share-landing-note {
  margin: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--ink);
  max-width: 34ch;
}
.share-landing-sub { margin: 16px 0 0; }
.share-landing-notes {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: max-content;
  max-width: min(90vw, 360px);
  padding-bottom: 28px;
  animation: share-land-copy-in 0.55s ease-out both;
}
.share-landing-note-gap { margin-top: 12px; }

/* Shared board welcome — hot pink card above the grid */
.share-welcome-overlay {
  z-index: 120;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.share-welcome-overlay.is-open { opacity: 1; }
.share-welcome-overlay.is-closing { opacity: 0; }
.share-welcome-card {
  text-align: center;
  padding: 28px 28px 24px;
  max-width: 420px;
  background: var(--coin);
  border-color: #000000;
  color: #000000;
  animation: share-snopped-pop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.share-welcome-hero {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: #000000;
}
.share-welcome-sub {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: #000000;
}
.share-welcome-notes {
  margin: 18px 0 0;
}
.share-welcome-note {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: #000000;
  opacity: 1;
}
.share-welcome-note + .share-welcome-note { margin-top: 6px; }
.share-welcome-actions {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}
.share-welcome-btn {
  width: auto;
  min-width: 0;
  padding: 0 22px;
  background: #FFFFFF;
  color: #000000;
  border-color: #000000;
  outline: none;
}
.share-welcome-btn:hover {
  background: #000000;
  color: #FFFFFF;
}
.share-welcome-btn:focus,
.share-welcome-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Claimed user: pick board for a newly opened shared snop */
.share-place-card {
  text-align: left;
}
.share-place-card .share-welcome-hero,
.share-place-card .share-welcome-sub {
  text-align: center;
}
.share-place-label {
  display: block;
  margin: 18px 0 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #000000;
}
.share-place-select {
  width: 100%;
  height: 48px;
  margin: 0;
  background: #FFFFFF;
  color: #000000;
  border: var(--stroke) solid #000000;
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -0.025em;
  padding: 0 12px;
  box-sizing: border-box;
}
.share-place-card .share-welcome-actions {
  margin-top: 18px;
}

.share-coach {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 118px;
  opacity: 0;
  --coach-rot: -8deg;
}
.share-coach.is-on { opacity: 1; }
.share-coach.is-on .share-coach-bubble {
  animation:
    share-coach-shake-in 0.55s ease-out both,
    share-coach-dance 1.1s ease-in-out 0.55s 2;
}
.share-coach.is-off {
  opacity: 0;
  transition: opacity 0.28s ease;
}
.share-coach-move {
  align-items: flex-start;
  --coach-rot: -8deg;
}
.share-coach-scale {
  align-items: flex-end;
  --coach-rot: 7deg;
}
.share-coach-bubble {
  position: relative;
  display: inline-block;
  background: var(--coin);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 22px;
  padding: 7px 12px 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
  transform: rotate(var(--coach-rot));
  transform-origin: center center;
}
.share-coach-text { display: inline-block; }
/* Comic tail pointing toward the snop corner */
.share-coach-tail {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--coin);
  border-right: var(--stroke) solid var(--ink);
  border-bottom: var(--stroke) solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.share-coach-move .share-coach-tail {
  right: 14px;
  bottom: -6px;
}
.share-coach-scale .share-coach-tail {
  left: 14px;
  top: -6px;
  border-right: none;
  border-bottom: none;
  border-left: var(--stroke) solid var(--ink);
  border-top: var(--stroke) solid var(--ink);
}
.share-coach-arrow {
  width: 108px;
  height: 78px;
  color: var(--ink);
  display: block;
  overflow: visible;
}
.share-coach-arrow-scale {
  align-self: flex-end;
}
.share-coach-tip {
  /* measurement anchor for tip alignment; keep tiny but painted for getBBox */
  opacity: 0.001;
}
@keyframes share-coach-shake-in {
  0% {
    opacity: 0;
    transform: translate(4px, 10px) rotate(calc(var(--coach-rot) - 4deg)) scale(0.88);
  }
  22% {
    opacity: 1;
    transform: translate(-4px, -3px) rotate(calc(var(--coach-rot) + 3deg)) scale(1.04);
  }
  44% {
    transform: translate(3px, 2px) rotate(calc(var(--coach-rot) - 2deg)) scale(0.98);
  }
  66% {
    transform: translate(-2px, -1px) rotate(calc(var(--coach-rot) + 2deg)) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(var(--coach-rot)) scale(1);
  }
}
@keyframes share-coach-dance {
  0%, 100% { transform: translate(0, 0) rotate(var(--coach-rot)); }
  25% { transform: translate(-1px, -2px) rotate(calc(var(--coach-rot) - 1.5deg)); }
  50% { transform: translate(1px, 1px) rotate(calc(var(--coach-rot) + 2deg)); }
  75% { transform: translate(-1px, 0) rotate(calc(var(--coach-rot) + 0.5deg)); }
}
@media (max-width: 720px) {
  .share-coach { width: 96px; }
  .share-coach-arrow { width: 84px; height: 64px; }
}
.share-board-name {
  font-weight: 600;
  margin: 0 0 12px;
}
.share-add-line {
  margin: 8px 12px 16px;
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font: inherit;
}
.share-add-line:hover { color: var(--coin); }
@keyframes share-land-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
/* Keep horizontal centering while the intro animates (avoid right→center jump) */
@keyframes share-land-copy-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes share-card-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Share panel — snop chrome */
.share-panel-overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, 0.28);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  transition: opacity 0.22s ease;
}
.share-panel-overlay.is-fading { opacity: 0; }
.share-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 860px);
  max-height: min(88vh, 560px);
  overflow: auto;
  background: var(--coin);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-card);
  padding: 16px 16px 14px;
  text-align: left;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.025em;
  box-shadow: none;
  animation: share-land-in 0.25s ease-out;
}
.share-panel.is-snopped {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 20px;
  overflow: hidden;
}
.share-snopped {
  animation: share-snopped-pop 0.4s cubic-bezier(0.2, 1.2, 0.3, 1) both;
}
.share-snopped-title {
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 6px;
}
.share-snopped-sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.share-panel-hero {
  text-align: center;
  margin: 0 0 14px;
  padding-right: 0;
}
.share-panel-title {
  margin: 0;
  font-family: inherit;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
}
.share-panel-lead {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}
.share-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 720px) {
  .share-panel { width: min(100%, 360px); }
  .share-options { grid-template-columns: 1fr; }
}
.share-option {
  margin: 0;
  padding: 10px;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-card);
  background: #FFFFFF;
  color: var(--ink);
  text-align: left;
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.share-option-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.share-option-action {
  margin-top: auto;
  flex: none;
}
.share-option-label {
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin: 0 0 8px;
}
.share-option-hint {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.share-confetti {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.share-confetti-piece {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 1px;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
  animation: share-confetti-burst 1.35s cubic-bezier(0.15, 0.75, 0.25, 1) forwards;
  animation-delay: var(--delay, 0s);
}
@keyframes share-snopped-pop {
  from { opacity: 0; transform: scale(0.86); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes share-confetti-burst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.4);
  }
  12% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--cx)), calc(-50% + var(--cy) + 40px))
      rotate(var(--rot)) scale(1);
  }
}
.share-panel-close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: none;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
  color: var(--ink);
  width: 28px;
  height: 28px;
  padding: 0;
}
.share-panel-close:hover { opacity: 0.55; }
.share-panel-section { margin-top: 8px; }
.share-panel-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 4px;
}
.share-friends-dd { position: relative; }
.share-friends-dd-btn {
  width: 100%;
  text-align: left;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 7px 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: #FFFFFF;
  cursor: pointer;
}
.share-friends-dd-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.share-friends-dd-btn.is-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.share-friends-dd-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 5;
  border: var(--stroke) solid var(--ink);
  border-top: none;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  background: #FFFFFF;
  max-height: 160px;
  overflow: auto;
  padding: 4px;
}
.share-friends-empty {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  padding: 6px 4px;
}
.share-friends-picks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.share-friend-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: var(--stroke) solid transparent;
  border-radius: var(--radius-card);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  background: #FFFFFF;
  color: var(--ink);
}
.share-friend-pick:hover { background: var(--coin-soft); }
.share-friend-pick.is-on { background: var(--coin); }
.share-friend-pick input { accent-color: var(--ink); width: 14px; height: 14px; flex: none; }
.share-friend-name {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-friends-send {
  margin-top: auto;
  width: 100%;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background: var(--coin);
  color: var(--ink);
}
.share-friends-send:hover:not(:disabled) { background: #FFFFFF; color: var(--ink); }
.share-friends-send:disabled {
  opacity: 0.4;
  cursor: default;
}
.share-email,
.share-message,
.friends-add-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 7px 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 6px;
  background: #FFFFFF;
}
.share-message {
  resize: vertical;
  min-height: 48px;
  line-height: 1.35;
}
.share-email:focus,
.share-message:focus {
  outline: none;
  border-color: var(--ink);
}
.share-email::placeholder,
.share-message::placeholder {
  color: var(--ink);
  opacity: 0.45;
}
.share-invite-btn, .friends-add-btn, .share-copy-btn {
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background: var(--ink);
  color: #FFFFFF;
  width: 100%;
  margin-top: auto;
}
.share-invite-btn:hover, .share-copy-btn:hover, .friends-add-btn:hover {
  background: #FFFFFF;
  color: var(--ink);
}
.share-role-select {
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-btn);
  padding: 6px 8px;
  font: inherit;
  font-weight: 500;
  color: var(--ink);
  background: #FFFFFF;
}
.share-grant-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  padding: 6px 0;
  border-top: var(--stroke) solid var(--ink);
  margin-top: 6px;
}
.share-grant-rm {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
}
.share-grant-role { color: var(--ink); font-size: 16px; font-weight: 500; }

.friends-head { margin: 12px 0 8px; }
.friends-title { font-weight: 700; font-size: 0.95rem; }
.friends-shared-row, .friends-row {
  display: flex; width: 100%; text-align: left; gap: 8px;
  padding: 10px 0; border: none; border-bottom: 1px solid #eee;
  background: none; font: inherit; cursor: pointer;
}
.friends-shared-row:hover { color: var(--coin); }
.friends-status { margin-left: auto; color: #999; font-size: 0.8rem; }
.friends-add-row { display: flex; gap: 8px; margin-top: 16px; }
.friends-empty { color: #999; font-size: 0.9rem; padding: 8px 0; }

/* ---------- mobile quartet shell ---------- */

.life-label-short,
.new-label-short { display: none; }
.mobile-only-btn { display: none; }
.mobile-board-name { display: none; }
.mobile-pager { display: none; }
.mobile-sheet-backdrop { display: none; }

@media (max-width: 950px) {
  :root {
    --dock-h: 0px;
    --dock-h-collapsed: 0px;
    --card-w: 100%;
    --topbar-h: 64px;
    --mobile-pager-h: 56px;
    --logo-w: 150px;
    --logo-h: 30px;
  }
  html, body {
    overflow: hidden;
    font-size: 18px;
    height: 100%;
    height: 100dvh;
  }
  body.is-mobile {
    --topbar-h: 64px;
  }

  /* Topbar: flex shell + safe areas */
  .topbar {
    position: relative;
    z-index: 50;
    height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: visible;
  }
  .topbar-left,
  .topbar-mid,
  .topbar-right {
    position: static;
    transform: none;
    height: auto;
    left: auto;
    right: auto;
    top: auto;
    padding: 0;
    display: flex;
    align-items: center;
  }
  .topbar-left { flex: none; }
  .topbar-mid {
    flex: 1 1 auto;
    min-width: 0;
    gap: 8px;
    justify-content: flex-start;
  }
  .topbar-right {
    flex: none;
    gap: 6px;
  }
  .logo-full {
    width: var(--logo-w);
    height: var(--logo-h);
  }
  .topbar-btn,
  .topbar-new,
  .topbar-icon-btn {
    min-width: 44px;
    min-height: 44px;
    height: 44px;
    padding: 0 12px;
    font-size: 16px;
  }
  .topbar-icon-btn { padding: 0; width: 44px; }
  .life-label-full,
  .new-label-full { display: none; }
  .life-label-short,
  .new-label-short {
    display: inline;
  }
  .topbar-new {
    width: 44px;
    padding: 0;
    font-size: 28px;
    line-height: 1;
  }
  .new-label-short {
    font-size: 28px;
    line-height: 1;
    font-weight: 500;
  }
  .topbar-viewport,
  .viewport-dots { display: none !important; }
  /* Mobile chrome: logo, +, account — no Life / Browse / Settings */
  #myTimeBtn,
  #mobileBrowseBtn,
  .mobile-only-btn { display: none !important; }
  .mobile-board-name {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    letter-spacing: -0.025em;
    opacity: 0.55;
    pointer-events: none;
  }

  /* Board list as bottom sheet (opened from logo) */
  .viewport-wrap {
    position: fixed;
    inset: 0;
    z-index: 95;
    display: block !important;
    pointer-events: none;
    width: auto;
    height: auto;
  }
  body.viewport-menu-open .viewport-wrap {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.28);
  }
  .popmenu.viewport-menu {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(70dvh, 520px);
    border-radius: 12px 12px 0 0;
    border: var(--stroke) solid var(--ink);
    border-bottom: none;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow: auto;
  }

  /* Quartet stage */
  .board-wrap {
    top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
    bottom: calc(var(--mobile-pager-h) + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    touch-action: pan-y;
  }
  .board.is-quartet,
  .board {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    height: 100%;
    padding: 12px 16px;
    gap: 0;
    background-image: none !important;
    grid-template-columns: none;
  }
  .board.is-quartet .noto,
  .board .noto {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    grid-column: unset !important;
    grid-row: unset !important;
    display: flex;
    flex-direction: column;
  }
  .board.is-quartet .noto-body,
  .board .noto .noto-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .board.is-quartet .noto-resize,
  .board .noto-resize { display: none !important; }
  .board.is-quartet .noto-drag,
  .board .noto-drag { display: none; }
  .bcol { width: 100%; max-height: none; }

  .noto-title { font-size: 22px; line-height: 1.25; }
  .line-text { font-size: 18px; line-height: 1.4; }
  .line-menu {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .line .i-checkbox-empty,
  .line .i-checkbox-checked {
    width: 18px;
    height: 18px;
  }
  .line-aside,
  .line-widget {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .dock-drag { display: none; }

  /* Bottom pager */
  .mobile-pager {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    height: calc(var(--mobile-pager-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 16px env(safe-area-inset-bottom, 0px);
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--canvas);
    border-top: var(--stroke) solid var(--ink);
    box-sizing: border-box;
  }
  .mobile-pager[hidden] { display: none !important; }
  .mobile-pager-btn {
    min-width: 44px;
    min-height: 44px;
    border: var(--stroke) solid var(--ink);
    border-radius: var(--radius-btn);
    background: #fff;
    color: var(--ink);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    appearance: none;
  }
  .mobile-pager-btn:disabled {
    opacity: 0.35;
    cursor: default;
  }
  .mobile-dots {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
    max-height: 44px;
    overflow: hidden;
  }
  .mobile-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: var(--stroke) solid var(--ink);
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    appearance: none;
  }
  .mobile-dot.is-active { background: var(--coin); }

  /* Dock as browse bottom sheet */
  .bottombar,
  .bottombar:hover,
  .bottombar:focus-within,
  .bottombar.is-open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 92;
    height: auto !important;
    max-height: min(78dvh, 640px);
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    transform: translateY(110%);
    transition: transform 0.28s cubic-bezier(.22, 1, .36, 1);
    border-top: var(--stroke) solid var(--ink);
    background: var(--canvas);
    overflow: auto;
    pointer-events: none;
    justify-content: flex-start;
  }
  body.browse-open .bottombar,
  body.browse-open .bottombar:hover,
  body.browse-open .bottombar:focus-within,
  body.browse-open .bottombar.is-open {
    transform: translateY(0);
    pointer-events: auto;
  }
  .bottombar .dock-filter-body,
  .bottombar:hover .dock-filter-body,
  .bottombar:focus-within .dock-filter-body,
  .bottombar.is-open .dock-filter-body {
    flex: 1 1 auto !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow: visible;
  }
  .bottombar .dock-emoji-body,
  .bottombar:hover .dock-emoji-body,
  .bottombar:focus-within .dock-emoji-body,
  .bottombar.is-open .dock-emoji-body,
  body.browse-open .bottombar .dock-emoji-body {
    flex: 1 1 auto !important;
    max-height: 160px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }
  .bottombar .dock-section,
  .bottombar:hover .dock-section,
  .bottombar:focus-within .dock-section,
  .bottombar.is-open .dock-section,
  body.browse-open .bottombar .dock-section {
    width: 100% !important;
    height: auto !important;
    max-height: none;
    padding: 12px !important;
    overflow: visible;
  }
  .bottombar .dock-title,
  .bottombar:hover .dock-title,
  .bottombar.is-open .dock-title,
  body.browse-open .bottombar .dock-title {
    height: auto !important;
    margin-bottom: 10px;
  }
  .bottombar .dock-search,
  .bottombar:hover .dock-search,
  .bottombar.is-open .dock-search,
  body.browse-open .bottombar .dock-search {
    max-height: 44px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    border-bottom-color: var(--line);
    padding: 0 0 6px !important;
    margin-bottom: 10px !important;
  }
  .bottombar .dock-list,
  .bottombar:hover .dock-list,
  .bottombar.is-open .dock-list,
  body.browse-open .bottombar .dock-list {
    flex: 1 1 auto !important;
    max-height: 160px !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    overflow-y: auto !important;
  }
  .mobile-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 91;
    background: rgba(0, 0, 0, 0.28);
  }
  .mobile-sheet-backdrop[hidden] { display: none !important; }
  .dock-row {
    height: auto;
    max-height: none;
    overflow: auto;
  }
  .dock-cluster {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 16px;
    gap: 16px;
  }
  .dock-section {
    width: 100%;
    max-width: none;
    height: auto;
  }
  .dock-list {
    max-height: 160px;
  }

  /* Life sheet — near fullscreen, horizontal tabs */
  body.sheet-open {
    --org-h: min(92dvh, calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px)));
  }
  body.sheet-open .mobile-pager { display: none; }
  body.sheet-open .board-wrap {
    bottom: 0;
  }
  .org-resize-handle { display: none !important; }
  .org-rail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    height: auto;
    flex-direction: row;
    gap: 6px;
    padding: 10px 12px;
    background: var(--canvas);
    border-bottom: var(--stroke) solid var(--ink);
    z-index: 8;
  }
  .org-mode-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 44px;
    font-size: 14px;
    padding: 0 6px;
  }
  .time-view,
  .tasks-view.sheet-panel,
  .friends-view.sheet-panel {
    padding-right: 0;
    padding-top: 64px;
  }
  .time-week {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 12px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .time-day-col {
    flex: none;
    width: 100%;
    min-height: 260px;
  }
  /* Organizer My Week — stack days (no 7-col squeeze) */
  .org-weeks {
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    gap: 16px;
  }
  .org-week-cols {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: visible;
    gap: 12px;
    min-height: 0;
  }
  .org-time-gutter {
    display: none;
  }
  .org-day-col {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 280px;
  }
  .org-day-grid-wrap {
    min-height: 220px;
  }
  .tasks-scroll {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .tasks-col {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
  }
  .org-resize { display: none !important; }

}


/* ---------- flat lock + Discover chrome ---------- */
.topbar-btn,
.topbar-new,
.topbar-group,
.topbar-icon-btn,
.noto,
.popmenu,
.modal-card,
.toast,
.done-toast,
.dock-section,
.linemenu,
.linemenu-time,
.confirm-menu,
.fmt-menu {
  box-shadow: none !important;
}
.topbar-btn:hover,
.topbar-new:hover,
.topbar-group:hover,
.topbar-icon-btn:hover {
  transform: none;
}