prototype.html

<style>
  :root {
    --bg: #ebeef2;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --ink: #1a1f27;
    --muted: #5b6672;
    --faint: #9aa4b0;
    --hairline: #dce1e8;
    --line: #128074; /* green — reserved for the timeline (dots/lines/arrows) */
    --line-strong: #0c6b61;
    --line-soft: rgba(18, 128, 116, 0.14);
    --accent: #6d45d9; /* purple — all UI accents (buttons, focus, controls) */
    --accent-strong: #5a32c0;
    --danger: #c24b3a;
    --shadow: 0 1px 2px rgba(20, 28, 38, 0.06), 0 8px 24px rgba(20, 28, 38, 0.07);
    --radius: 16px;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;
    /* friendly rounded system font (SF Pro Rounded on Apple) for everything.
       IMPORTANT: no CJK fonts (e.g. Hiragino Maru Gothic) in this stack — they
       have Cyrillic glyphs and would be picked for Russian text, rendering it
       very wide/spaced. Fall straight to system-ui (SF Pro) for full Cyrillic. */
    --sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* type scale — the single source of truth for every font-size */
    --fs-2xs: 11px; /* uppercase labels, meta */
    --fs-xs: 12px; /* fine hints */
    --fs-sm: 13px; /* captions, buttons, secondary lines */
    --fs-base: 15px; /* controls, inputs */
    --fs-md: 16px; /* primary content (item text) */
    --fs-lg: 20px; /* modal titles, mobile note title */
    --fs-xl: 26px; /* screen H1, note title */
    --fs-display: 34px; /* modal hero value (the big number you set) */
    /* weights — regular / medium (accent) / semibold (headings) / bold (hero) */
    --w-regular: 400;
    --w-medium: 500;
    --w-semibold: 600;
    --w-bold: 700;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #12161b;
      --surface: #1b212a;
      --surface-2: #222a34;
      --ink: #e7ecf2;
      --muted: #94a0ad;
      --faint: #5f6c7a;
      --hairline: #2a323d;
      --line: #29a99b;
      --line-strong: #34c0b0;
      --line-soft: rgba(41, 169, 155, 0.16);
      --accent: #7c5cf0;
      --accent-strong: #9578f3;
      --danger: #e06a55;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    }
  }
  :root[data-theme="light"] {
    --bg: #ebeef2;
    --surface: #ffffff;
    --surface-2: #f4f6f9;
    --ink: #1a1f27;
    --muted: #5b6672;
    --faint: #9aa4b0;
    --hairline: #dce1e8;
    --line: #128074;
    --line-strong: #0c6b61;
    --line-soft: rgba(18, 128, 116, 0.14);
    --accent: #6d45d9;
    --accent-strong: #5a32c0;
    --danger: #c24b3a;
    --shadow: 0 1px 2px rgba(20, 28, 38, 0.06), 0 8px 24px rgba(20, 28, 38, 0.07);
  }
  :root[data-theme="dark"] {
    --bg: #12161b;
    --surface: #1b212a;
    --surface-2: #222a34;
    --ink: #e7ecf2;
    --muted: #94a0ad;
    --faint: #5f6c7a;
    --hairline: #2a323d;
    --line: #29a99b;
    --line-strong: #34c0b0;
    --line-soft: rgba(41, 169, 155, 0.16);
    --accent: #7c5cf0;
    --accent-strong: #9578f3;
    --danger: #e06a55;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  * {
    box-sizing: border-box;
  }
  html,
  body {
    margin: 0;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }
  .app {
    max-width: 940px;
    margin: 0 auto;
    padding: 28px 20px 96px;
    min-height: 100%;
  }

  /* ---------- top bar ---------- */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
  }
  .icon-btn {
    appearance: none;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--muted);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
    transition:
      color 0.15s,
      border-color 0.15s,
      transform 0.1s;
  }
  .icon-btn:hover {
    color: var(--ink);
    border-color: var(--faint);
  }
  .icon-btn:active {
    transform: scale(0.94);
  }

  /* ---------- auth ---------- */
  .top-left {
    display: flex;
    align-items: center;
  }
  .top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .auth-btn {
    appearance: none;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
    height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    transition:
      border-color 0.15s,
      color 0.15s;
  }
  .auth-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .auth-btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .auth-btn.primary:hover {
    background: var(--accent-strong);
    color: #fff;
  }
  .user-wrap {
    position: relative;
  }
  .avatar-btn {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 3px 12px 3px 4px;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
    border-radius: 20px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    max-width: 220px;
    transition: border-color 0.15s;
  }
  .avatar-btn:hover {
    border-color: var(--faint);
  }
  .avatar-btn img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    background: var(--surface-2);
  }
  .avatar-btn .who {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .avatar-fallback {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: none;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: var(--fs-sm);
    font-weight: var(--w-semibold);
  }
  .pop {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 6px;
    min-width: 190px;
    animation: fade 0.16s ease;
  }
  .pop .email {
    padding: 8px 10px 9px;
    color: var(--muted);
    font-size: var(--fs-xs);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pop button {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--ink);
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--fs-sm);
  }
  .pop button:hover {
    background: var(--surface-2);
  }
  .gpanel {
    position: absolute;
    right: 0;
    top: 46px;
    z-index: 60;
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: var(--shadow);
    padding: 16px;
    animation: fade 0.16s ease;
  }
  .gpanel .ghint {
    font-size: var(--fs-xs);
    color: var(--muted);
    margin-bottom: 12px;
    max-width: 240px;
    line-height: 1.45;
  }
  .gbtn-holder {
    min-height: 40px;
    display: flex;
    justify-content: center;
  }
  .sync-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 7px;
    vertical-align: middle;
    opacity: 0;
    transition: opacity 0.2s;
  }
  .sync-dot.on {
    opacity: 1;
  }

  /* ---------- home grid ---------- */
  .screen-head {
    margin-bottom: 18px;
  }
  .screen-head h1 {
    font-size: var(--fs-xl);
    font-weight: var(--w-semibold);
    letter-spacing: -0.02em;
    margin: 0 0 4px;
  }
  .screen-head p {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-sm);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
  .card {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 18px;
    cursor: pointer;
    min-height: 168px;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: var(--shadow);
    transition:
      transform 0.12s,
      border-color 0.15s,
      box-shadow 0.2s;
    position: relative;
  }
  .card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
  }
  .card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .card .title {
    font-weight: var(--w-semibold);
    font-size: var(--fs-md);
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card .meta {
    font-family:
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
    font-size: var(--fs-2xs);
    color: var(--faint);
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .card .mini {
    margin-top: 0;
    padding-top: 14px;
  }
  .card .card-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: var(--faint);
    cursor: pointer;
    opacity: 0;
    transition:
      opacity 0.12s,
      color 0.12s,
      background 0.12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-md);
  }
  .card:hover .card-del {
    opacity: 1;
  }
  .card-del:hover {
    color: var(--danger);
    background: var(--surface-2);
  }
  /* on touch devices there is no hover, so keep the delete button visible */
  @media (hover: none) {
    .card .card-del {
      opacity: 1;
      color: var(--muted);
    }
  }

  /* colour controls: a palette (random colour) + a reset outline, bottom-right */
  .card-paint,
  .card-uncolor {
    position: absolute;
    right: 10px;
    padding: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    z-index: 3;
    opacity: 0;
    transition:
      opacity 0.12s,
      transform 0.1s;
  }
  .card-paint {
    bottom: 42px;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    background: linear-gradient(135deg, #22c55e 0%, #8b5cf6 52%, #eab308 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .card-uncolor {
    bottom: 12px;
    background: transparent;
    border: 1.6px solid currentColor;
    color: inherit;
  }
  .card:hover .card-paint,
  .card:hover .card-uncolor {
    opacity: 0.95;
  }
  .card-paint:active,
  .card-uncolor:active {
    transform: scale(0.9);
  }
  @media (hover: none) {
    .card .card-paint,
    .card .card-uncolor {
      opacity: 0.9;
    }
  }
  .card.colored .card-del {
    color: currentColor;
    opacity: 0.7;
  }
  .card.colored .card-del:hover {
    color: var(--danger);
    background: rgba(0, 0, 0, 0.08);
    opacity: 1;
  }

  .card.add {
    align-items: center;
    justify-content: center;
    border-style: dashed;
    border-color: var(--faint);
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    gap: 10px;
  }
  .card.add:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .card.add .plus {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xl);
    font-weight: var(--w-regular);
    line-height: 46px;
  }
  .card.add .add-label {
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
  }

  /* ---------- home sections + horizontal carousel ---------- */
  .section {
    margin-bottom: 30px;
  }
  .section + .section {
    margin-top: 26px;
  } /* extra air above "Timed dotline" */
  .section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 14px;
    cursor: pointer;
    color: var(--ink);
  }
  .section-plus {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    border: 2px dashed var(--faint);
    color: var(--muted);
    display: grid;
    place-items: center;
    font-size: var(--fs-xl);
    font-weight: var(--w-regular);
    transition:
      border-color 0.15s,
      color 0.15s,
      transform 0.1s;
  }
  .section-head:hover .section-plus {
    border-color: var(--accent);
    color: var(--accent);
  }
  .section-head:active .section-plus {
    transform: scale(0.94);
  }
  .section-name {
    font-size: var(--fs-xl);
    font-weight: var(--w-semibold);
    letter-spacing: -0.02em;
  }

  .carousel {
    display: flex;
    gap: 16px;
  }
  .carousel .card {
    flex: 0 0 auto;
  }
  @media (min-width: 641px) {
    .carousel {
      flex-wrap: wrap;
    }
    .carousel .card {
      width: 210px;
    }
  }
  @media (max-width: 640px) {
    .carousel {
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 8px;
      scrollbar-width: none;
    }
    .carousel::-webkit-scrollbar {
      display: none;
    }
    /* spacers so the first/last card can sit dead-centre with an ear each side */
    .carousel::before,
    .carousel::after {
      content: "";
      flex: 0 0 9%;
    }
    .carousel::before,
    .carousel::after {
      flex-basis: 13%;
    }
    .carousel .card {
      flex: 0 0 70%;
      width: auto;
      padding: 12px;
      scroll-snap-align: center;
      scroll-snap-stop: always; /* page one card per swipe */
      aspect-ratio: 1.5 / 1;
      min-height: 170px;
      overflow: hidden; /* full preview + title fit */
    }
    .carousel .card .title,
    .carousel .card .meta {
      flex-shrink: 0;
    }
    .carousel .card .mini {
      flex: 1 1 auto;
      min-height: 0;
      padding-top: 8px;
      display: flex;
      align-items: flex-start;
      overflow: hidden;
    }
  }

  /* ---------- note editor ---------- */
  .editor-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }
  /* whole-chain arrow direction toggle (free notes) */
  .arrow-toggle {
    display: inline-flex;
    gap: 2px;
    flex: none;
    padding: 2px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--hairline);
  }
  .arrow-toggle button {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    color: var(--muted);
    font-size: var(--fs-md);
    line-height: 1;
    display: grid;
    place-items: center;
    transition:
      background 0.12s,
      color 0.12s;
  }
  .arrow-toggle button:hover {
    color: var(--ink);
  }
  .arrow-toggle button.on {
    background: var(--accent);
    color: #fff;
  }
  .back-btn {
    appearance: none;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--muted);
    border-radius: 10px;
    height: 38px;
    padding: 0 14px 0 11px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    transition:
      color 0.15s,
      border-color 0.15s;
  }
  .back-btn:hover {
    color: var(--ink);
    border-color: var(--faint);
  }
  /* Share button (top-right of the editor) + shared read-only chrome */
  .share-btn {
    margin-left: auto;
    flex: none;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
    height: 34px;
    padding: 0 15px;
    border-radius: 10px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    transition:
      border-color 0.15s,
      color 0.15s,
      background 0.15s;
  }
  .share-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  .share-btn.primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .share-btn.primary:hover {
    background: var(--accent-strong);
    color: #fff;
  }
  .share-banner {
    margin: -4px 0 16px;
    padding: 9px 14px;
    border-radius: 10px;
    text-align: center;
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
  }
  .share-modal {
    max-width: 440px;
  }
  .share-title {
    font-size: var(--fs-lg);
    font-weight: var(--w-semibold);
    margin-bottom: 14px;
  }
  .share-url {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--hairline);
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-sm);
  }
  .share-copy {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
  }
  .share-copy:hover {
    background: var(--accent-strong);
  }
  .share-textlink {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: var(--fs-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .share-textlink:hover {
    color: var(--accent);
  }
  .note-title {
    font-size: var(--fs-xl);
    font-weight: var(--w-semibold);
    letter-spacing: -0.02em;
    border: none;
    background: transparent;
    color: var(--ink);
    outline: none;
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border-radius: 8px;
    resize: none;
    overflow: hidden;
    line-height: 1.25;
    white-space: pre-wrap;
    word-wrap: break-word;
    field-sizing: content;
    /* use a stack with reliable Cyrillic support for user-entered text */
    font-family:
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
  }
  .note-title:focus {
    background: transparent;
  }
  .note-title::placeholder {
    color: var(--faint);
  }

  /* editable/user-entered text fields need a Cyrillic-safe font stack */
  .card .title,
  .node-label,
  .node-alias,
  .link-label {
    font-family:
      system-ui,
      -apple-system,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      sans-serif;
  }

  .board {
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 30px 24px 34px;
  }
  @media (max-width: 420px) {
    .board {
      padding: 22px 16px 26px;
    }
    .note-title {
      font-size: var(--fs-lg);
    }
  }

  /* vertical line with stations — the axis sits a touch LEFT of centre so the
     right-hand labels get more room. One --shift drives rail, dots, pill and "+" */
  .spine {
    --dot: 34px;
    --shift: 28px;
    position: relative;
    padding-top: 30px;
  }
  .node,
  .link {
    position: relative;
    z-index: 2;
  }

  /* rail runs vertically through the exact horizontal center */
  .node::before,
  .node::after,
  .link::before {
    content: "";
    position: absolute;
    left: calc(50% - var(--shift));
    transform: translateX(-50%);
    width: 3px;
    background: var(--line);
    z-index: 0;
  }
  /* the rail through a node is split — top half (::before) and bottom half
     (::after), meeting behind the centred dot — so an arrowhead can open a
     clean gap on just one side without touching the other. */
  .node::before {
    top: 0;
    bottom: 50%;
  }
  .node::after {
    top: 50%;
    bottom: 0;
  }
  .link::before {
    top: 0;
    bottom: 0;
  }
  .spine > .node:first-of-type::before {
    display: none;
  } /* nothing above the anchor */
  .node.ghost::before,
  .node.ghost::after {
    display: none;
  }

  /* SVG overlay used only while dragging a dot to draw the stressed string */
  .spine-wire {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1; /* drawn under nodes/links so it never covers dots/clocks */
  }
  .spine-wire path {
    fill: none;
    stroke: var(--line);
    stroke-width: 3;
    stroke-linecap: round;
    transition:
      stroke 0.15s,
      opacity 0.2s;
  }
  .spine-wire path.snapping {
    opacity: 0;
  }

  /* grid keeps the dot dead-centre while the label lives in the LEFT column
     and wraps freely (no truncation) — the row grows and the line lengthens */
  .node {
    display: grid;
    /* left column shrinks by --shift so the dot lands left of centre; the rail
       above uses the same --shift so line and dots stay perfectly aligned */
    grid-template-columns: calc(50% - var(--shift) - 14px - var(--dot) / 2) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    min-height: var(--dot);
    padding: 5px 0;
    transition:
      transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 0.2s;
    touch-action: pan-y;
  }
  .node.dragging {
    transition: none;
  }
  /* while dragging, hide the labels so they don't collide with the hints */
  .node.dragging .node-label,
  .node.dragging .node-alias,
  .node.dragging .hl-star {
    opacity: 0;
  }
  .node.wire-hidden::before,
  .node.wire-hidden::after,
  .link.wire-hidden::before {
    opacity: 0;
  }
  .node.ghost.wire-hidden {
    opacity: 0;
    transition: opacity 0.15s;
  }
  .node.removing {
    opacity: 0;
    transform: translateX(var(--snap-dx, 120px)) scale(0.9);
  }
  .node.snap-back {
    transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform: none;
  }
  /* while dragging a dot: two hints flank it — left = add below, right = delete.
     The one you release toward fires; a small pull does nothing. */
  .drag-hint {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-2xs);
    font-weight: var(--w-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    padding: 5px 9px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--hairline);
    opacity: 0;
    transition:
      opacity 0.12s,
      background 0.12s,
      color 0.12s,
      transform 0.12s;
    pointer-events: none;
    z-index: 6;
  }
  .node.dragging .drag-hint {
    opacity: 1;
  }
  /* left of the dot = Delete (red); right of the dot = Add */
  .drag-hint.left {
    right: calc(50% + var(--shift) + 26px);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 45%, var(--hairline));
  }
  .drag-hint.right {
    left: calc(50% - var(--shift) + 26px);
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
  }
  .drag-hint.left.armed {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
  }
  .drag-hint.right.armed {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }
  .dot {
    grid-column: 2;
    position: relative;
    z-index: 2;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--line);
    cursor: pointer;
    padding: 0;
    /* the dot is a drag handle — take full pointer control so touch swipe-to-delete
       is not swallowed by the browser as a scroll gesture */
    touch-action: none;
    transition:
      transform 0.12s,
      background 0.15s,
      border-color 0.15s,
      box-shadow 0.15s;
  }
  .dot:hover {
    box-shadow: 0 0 0 6px var(--line-soft);
  }
  .dot:active {
    transform: scale(0.9);
  }
  .dot:focus-visible {
    outline: 2px solid var(--line);
    outline-offset: 3px;
  }
  .node.done .dot {
    background: var(--ink);
    border-color: var(--ink);
  }

  /* highlight: a small star at the far left toggles it; the point grows */
  .hl-star {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: var(--fs-md);
    line-height: 1;
    display: grid;
    place-items: center;
    z-index: 4;
    opacity: 0.9;
    transition:
      opacity 0.12s,
      color 0.12s,
      transform 0.12s;
  }
  .hl-star:hover {
    opacity: 1;
    color: var(--accent);
    transform: translateY(-50%) scale(1.12);
  }
  .node.hl .hl-star {
    opacity: 1;
    color: var(--accent);
  }
  .node.hl .dot {
    transform: scale(1.5);
  }
  .node.hl .node-label {
    font-size: calc(var(--fs-md) * 1.7);
    font-weight: var(--w-bold);
    letter-spacing: -0.02em;
  }
  /* MOBILE highlight: throw the text full-width, centred, ABOVE the dot; the
     vertical rail is cut before it reaches the text block and the text itself
     carries a surface background so no line shines through. */
  @media (max-width: 640px) {
    .node.hl {
      grid-template-rows: auto auto auto;
      row-gap: 4px;
      padding: 14px 0;
    }
    /* Highlight text spans the whole row but is shifted left by --shift so its
       visual centre aligns with the dot centre, not with the board centre. */
    .node.hl .node-alias,
    .node.hl .node-label-wrap {
      grid-column: 1 / -1;
      justify-self: center;
      text-align: center;
      max-width: 96%;
      transform: translateX(calc(-1 * var(--shift)));
      background: var(--surface);
      border-radius: 8px;
    }
    .node.hl .node-alias {
      display: block;
      grid-row: 1;
      font-size: var(--fs-sm);
      font-weight: var(--w-medium);
      color: var(--muted);
      opacity: 0.95;
      padding: 0 6px;
    }
    .node.hl .node-label-wrap {
      grid-row: 2;
      padding: 0;
      justify-self: stretch;
      width: 100%;
    }
    .node.hl .node-label {
      grid-column: auto;
      justify-self: auto;
      text-align: center;
      max-width: none;
      transform: none;
      background: transparent;
      border-radius: 0;
      font-size: calc(var(--fs-md) * 1.5);
      line-height: 1.2;
      font-weight: var(--w-bold);
      padding: 2px 14px 6px;
      position: relative;
      z-index: 3;
      flex: 1 1 auto;
    }
    .node.hl .node-note-btn {
      margin-left: auto;
      align-self: center;
    }
    .node.hl .dot {
      grid-row: 3;
      grid-column: 2;
      transform: scale(1.3);
      margin-top: 14px; /* clear the clock from the text above */
    }
    /* cut the top rail well above the time/date so the line never touches text */
    .node.hl::before {
      bottom: calc(100% - 45px);
    }
  }

  /* analog clock hands inside reverse dots (div-based, reliable rotation) */
  .clock-hand,
  .clock-cap {
    position: absolute;
    left: 50%;
    pointer-events: none;
    z-index: 3;
  }
  .clock-hand {
    bottom: 50%;
    width: 2.5px;
    border-radius: 999px;
    background: var(--line);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.2s;
  }
  .clock-hand.hour {
    height: 24%;
    width: 3px;
  }
  .clock-hand.minute {
    height: 34%;
  }
  .clock-cap {
    top: 50%;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: var(--line);
    transform: translate(-50%, -50%);
  }
  .node.done .clock-hand,
  .node.done .clock-cap {
    background: var(--surface);
  }

  /* alias: small editable number/name to the LEFT of the dot */
  .node-alias {
    grid-column: 1;
    justify-self: end;
    text-align: right;
    max-width: 100%;
    outline: none;
    font-size: var(--fs-xs);
    font-weight: var(--w-medium);
    color: var(--ink);
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.35;
    padding: 2px 6px;
    border-radius: 8px;
    cursor: text;
    overflow-wrap: anywhere;
    transition:
      background 0.12s,
      color 0.12s;
    user-select: text;
    -webkit-user-select: text;
  }
  .node-alias:hover,
  .node-alias:focus {
    background: var(--surface-2);
  }
  .node-alias.is-auto {
    color: var(--faint);
  }
  .spine.reverse .node-alias {
    font-size: var(--fs-md);
    font-weight: var(--w-medium);
    color: var(--ink);
    cursor: pointer;
  }
  .node.done .node-alias {
    color: var(--faint);
    text-decoration: line-through;
  }
  .spine.reverse .node.done .node-alias {
    font-weight: var(--w-medium);
  }
  .node-alias:empty::before {
    content: attr(data-ph);
    color: var(--faint);
    font-weight: var(--w-regular);
  }

  /* chronological violation highlight (reverse timeline) */
  .node.chrono-violation .dot {
    background: var(--danger);
    border-color: var(--danger);
  }
  .node.chrono-violation .clock-hand,
  .node.chrono-violation .clock-cap {
    background: var(--surface);
  }
  .node.chrono-violation .node-alias {
    color: var(--danger);
  }
  .chrono-hint {
    font-size: 10px;
    font-weight: var(--w-medium);
    color: var(--danger);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  /* label: main item name to the RIGHT of the dot */
  .node-label {
    grid-column: 3;
    justify-self: start;
    text-align: left;
    max-width: 100%;
    outline: none;
    font-size: var(--fs-md);
    font-weight: var(--w-medium);
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: 1.35;
    padding: 3px 7px;
    border-radius: 8px;
    cursor: text;
    overflow-wrap: anywhere;
    white-space: pre-wrap; /* keep manual line breaks */
    transition:
      background 0.12s,
      color 0.12s;
    user-select: text;
    -webkit-user-select: text;
  }
  .node-label:hover,
  .node-label:focus {
    background: var(--surface-2);
  }
  .node-label.is-hint {
    color: var(--faint);
  }
  .node.done .node-label {
    color: var(--faint);
    text-decoration: line-through;
  }
  .node-label:empty::before {
    content: attr(data-ph);
    color: var(--faint);
    font-weight: var(--w-regular);
  }

  /* connector label is a pill centered ON the line */
  .link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 88px;
    /* keep the pill centred on the shifted axis */
    padding-right: calc(var(--shift) * 2);
  }
  /* collapsed connector: a small dot on the line; tap it to expand the note field */
  .link-add {
    position: relative;
    z-index: 2;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--line);
    border: none;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 0 0 4px var(--surface); /* halo punches the rail so it stands out */
    transition:
      transform 0.12s,
      opacity 0.15s;
  }
  .link-add:hover {
    transform: scale(1.3);
  }
  .link-add:focus-visible {
    outline: 2px solid var(--line);
    outline-offset: 4px;
  }
  /* while dragging a dot to delete, hide the bare connector dot so it doesn't
     hang beside the stretched string (a text label, if any, stays put) */
  .link.wire-hidden .link-add {
    opacity: 0;
  }

  /* Directional arrowhead. It sits ON the node it points at, anchored to the
     dot's centre (50%), so the triangle→circle gap is CONSTANT no matter how
     tall the row is — a plain point and a featured one (bigger dot + bigger
     label) get exactly the same gap. The node's rail on that side is shortened
     by the matching amount to leave a clean opening for the triangle + gap.
     Direction: down = next later, up = next earlier. The dot stays a clean
     opaque circle (no colour masks). */
  .arrowhead {
    position: absolute;
    left: calc(50% - var(--shift));
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    z-index: 1;
    pointer-events: none;
    transition:
      top 0.18s,
      bottom 0.18s;
  }
  .arrowhead.down {
    border-top: 9px solid var(--line);
  } /* tip points down */
  .arrowhead.up {
    border-bottom: 9px solid var(--line);
  } /* tip points up */
  /* dot radius (--dot/2) + 5px gap + 9px arrowhead = distance from the centre */
  .arrowhead.slot-top {
    top: calc(50% - var(--dot) / 2 - 14px);
  }
  .arrowhead.slot-bottom {
    bottom: calc(50% - var(--dot) / 2 - 14px);
  }
  .node.arr-in-top::before {
    bottom: calc(50% + var(--dot) / 2 + 14px);
  }
  .node.arr-in-bottom::after {
    top: calc(50% + var(--dot) / 2 + 14px);
  }
  /* featured points scale the dot 1.5× — widen every offset so the gap holds */
  .node.hl .arrowhead.slot-top {
    top: calc(50% - var(--dot) / 2 * 1.5 - 14px);
  }
  .node.hl .arrowhead.slot-bottom {
    bottom: calc(50% - var(--dot) / 2 * 1.5 - 14px);
  }
  .node.hl.arr-in-top::before {
    bottom: calc(50% + var(--dot) / 2 * 1.5 + 14px);
  }
  .node.hl.arr-in-bottom::after {
    top: calc(50% + var(--dot) / 2 * 1.5 + 14px);
  }
  .node.dragging .arrowhead {
    opacity: 0;
  }
  /* mobile featured re-flows the row (the dot drops to its own line), so the
     centre anchor no longer tracks the dot — hide the incoming arrowheads */
  @media (max-width: 640px) {
    .node.hl .arrowhead {
      display: none;
    }
  }

  /* real-time mode: a dashed "now" line across the board that moves as time passes.
     Sits BEHIND the text (z-index 1 < nodes) and fades toward the background in
     the middle (where it would cross text/dots) so it never strikes through. */
  .now-line {
    position: absolute;
    left: -24px;
    right: -24px;
    z-index: 1;
    pointer-events: none;
    transition: top 0.5s ease;
  }
  /* A dashed sine wave that ripples VERTICALLY in place (a standing wave: the
     crests rise and fall, the dashes never slide sideways). Wide waves, real
     amplitude — like a gust stirring water. preserveAspectRatio=none stretches
     the wavelength to the full width while the amplitude stays fixed in px. */
  .now-wave {
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    width: 100%;
    height: 24px;
    display: block;
    overflow: visible;
  }
  .now-wave .s-edge {
    stop-color: var(--accent);
  }
  .now-wave .s-mid {
    stop-color: color-mix(in srgb, var(--accent) 22%, var(--bg));
  }
  /* the path `d` is animated per-frame in JS (organic multi-wave + pointer ripple);
     the attribute value in the markup is the static fallback for reduced-motion. */
  .now-label {
    position: absolute;
    right: 22px;
    top: -28px;
    z-index: 2;
    background: var(--accent);
    color: #fff;
    white-space: nowrap;
    font-size: var(--fs-2xs);
    font-weight: var(--w-semibold);
    padding: 2px 8px;
    border-radius: 8px;
  }
  @media (max-width: 640px) {
    .now-line {
      left: -16px;
      right: -16px;
    }
  }

  .link-label {
    position: relative;
    z-index: 2;
    outline: none;
    font-size: var(--fs-sm);
    color: var(--muted);
    background: var(--surface);
    padding: 4px 12px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: text;
    max-width: 78%;
    text-align: center;
    line-height: 1.35;
    overflow-wrap: anywhere;
    transition:
      border-color 0.12s,
      color 0.12s;
  }
  .link-label:hover,
  .link-label:focus {
    border-color: var(--accent);
    color: var(--ink);
  }
  .link-label.interval {
    cursor: pointer;
  }
  .link-label:empty::before {
    content: attr(data-ph);
    color: var(--faint);
  }

  /* ghost add-node at the very bottom: dashed line + dashed grey circle */
  .link.ghost::before {
    background: repeating-linear-gradient(var(--faint) 0 5px, transparent 5px 11px);
    width: 2px;
  }
  .node.ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-right: calc(var(--shift) * 2);
  }
  .add-dot {
    position: relative;
    z-index: 2;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: transparent;
    border: 2px dashed var(--faint);
    color: var(--faint);
    cursor: pointer;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: var(--fs-md);
    line-height: 1;
    transition:
      border-color 0.15s,
      color 0.15s,
      transform 0.12s;
  }
  .add-dot:hover {
    border-color: var(--line);
    color: var(--line);
    transform: scale(1.08);
  }
  .add-dot:focus-visible {
    outline: 2px solid var(--line);
    outline-offset: 3px;
  }
  .ghost-hint {
    position: absolute;
    left: calc(50% - var(--shift) + 22px);
    font-size: var(--fs-xs);
    color: var(--faint);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
  }
  .node.ghost:hover .ghost-hint {
    opacity: 1;
  }

  .empty {
    text-align: center;
    color: var(--muted);
    padding: 60px 20px;
  }

  /* mini preview on cards */
  .mini svg {
    display: block;
    overflow: visible;
  }
  /* var() doesn't work in SVG attributes — set the preview font via CSS instead */
  .mini svg text {
    font-family: var(--sans);
    letter-spacing: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    * {
      transition: none !important;
    }
  }
  .fade-in {
    animation: fade 0.25s ease;
  }
  @keyframes fade {
    from {
      opacity: 0;
      transform: translateY(-4px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }

  /* time picker modal */
  .tp-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(10, 14, 20, 0.22);
    backdrop-filter: blur(7px) saturate(1.1);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    display: grid;
    place-items: center;
    padding: 18px;
    animation: tp-fade 0.15s ease;
  }
  .tp-modal {
    position: relative;
    /* frosted-glass panel: slightly translucent over the blurred backdrop */
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    border: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
    border-radius: 18px;
    padding: 46px 24px 26px; /* generous top room so the × never crowds the hero */
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
    animation: tp-pop 0.18s ease;
  }
  @keyframes tp-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes tp-pop {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .tp-title {
    font-size: var(--fs-lg);
    font-weight: var(--w-semibold);
    margin-bottom: 18px;
  }
  .tp-field {
    margin-bottom: 20px;
  }
  .tp-label {
    font-size: var(--fs-2xs);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .tp-slider {
    width: 100%;
    accent-color: var(--accent);
  }
  /* shared big "hero" value = the thing being set; small sub = its consequence */
  .tp-hero {
    text-align: center;
    margin: 0 0 22px;
  }
  .tp-hero input {
    width: 100%;
    text-align: center;
    font-size: var(--fs-display);
    font-weight: var(--w-bold);
    font-family: var(--sans);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--ink);
    padding: 16px 10px;
    outline: none;
    transition: border-color 0.12s;
  }
  .tp-hero input:focus {
    border-color: var(--accent);
  }
  .tp-sub {
    margin-top: 4px;
    font-size: var(--fs-sm);
    color: var(--muted);
    font-family: var(--sans);
    font-weight: var(--w-regular);
  }
  .tp-date-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    border: 1px solid var(--hairline);
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--ink);
    font-size: var(--fs-base);
    cursor: pointer;
    overflow: hidden;
  }
  .tp-date-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
  }
  /* close: subtle × top-right (clicking outside also closes) */
  .tp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--faint);
    font-size: var(--fs-lg);
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition:
      color 0.12s,
      background 0.12s;
  }
  .tp-close:hover {
    color: var(--ink);
    background: var(--surface-2);
  }
  /* apply: one cute round button with just a check */
  .tp-actions {
    display: flex;
    justify-content: center;
    margin-top: 6px;
  }
  .tp-apply {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-xl);
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition:
      transform 0.12s,
      background 0.15s;
  }
  .tp-apply:hover {
    background: var(--accent-strong);
    transform: scale(1.06);
  }
  .tp-apply:active {
    transform: scale(0.94);
  }
  .tp-apply:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* ---------- attached notes on points ---------- */
  .node-label-wrap {
    grid-column: 3;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .node-label {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .node-note-btn {
    flex: 0 0 auto;
    position: relative;
    z-index: 5;
    appearance: none;
    border: none;
    background: transparent;
    color: var(--faint);
    font-size: var(--fs-md);
    font-weight: var(--w-semibold);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
      color 0.12s,
      background 0.12s;
  }
  .node-note-btn svg {
    display: block;
    width: 16px;
    height: 16px;
  }
  .node-note-btn:hover,
  .node-note-btn:focus {
    color: var(--accent);
    background: var(--surface-2);
  }
  .node-note-btn.has-note {
    color: var(--accent);
  }
  .node.done .node-note-btn {
    color: var(--faint);
  }
  .node.done .node-note-btn.has-note {
    color: var(--muted);
  }

  /* side panel / mobile overlay for attached note editor */
  .node-detail-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px;
    background: var(--surface);
    border-left: 1px solid var(--hairline);
    box-shadow: var(--shadow);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
  }
  .node-detail-panel.open {
    transform: translateX(0);
  }
  .node-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .node-detail-back {
    appearance: none;
    border: 1px solid var(--hairline);
    background: var(--surface);
    color: var(--ink);
    border-radius: 10px;
    padding: 0 12px;
    height: 36px;
    font-size: var(--fs-sm);
    font-weight: var(--w-medium);
    cursor: pointer;
  }
  .node-detail-title {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-md);
    font-weight: var(--w-semibold);
    padding: 0;
  }
  .node-detail-title::placeholder {
    color: var(--faint);
  }
  .node-detail-body {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--fs-base);
    line-height: 1.6;
    padding: 16px;
  }
  .node-detail-body::placeholder {
    color: var(--faint);
  }
  .node-detail-links {
    border-top: 1px solid var(--hairline);
    padding: 10px 16px;
    font-size: var(--fs-sm);
    color: var(--muted);
    max-height: 120px;
    overflow-y: auto;
  }
  .node-detail-links:empty {
    display: none;
  }
  .node-detail-links-label {
    font-weight: var(--w-medium);
    margin-bottom: 6px;
  }
  .node-detail-links a {
    display: block;
    color: var(--accent);
    text-decoration: underline;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
  }
  .node-detail-links a:hover {
    color: var(--accent-strong);
  }
  .node-detail-panel.readonly .node-detail-title-readonly {
    flex: 1;
    font-size: var(--fs-md);
    font-weight: var(--w-semibold);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .node-detail-panel.readonly .node-detail-body-readonly {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink);
  }
  .node-detail-panel.readonly .node-detail-body-readonly a {
    color: var(--accent);
    text-decoration: underline;
  }
  .node-detail-panel.readonly .node-detail-body-readonly a:hover {
    color: var(--accent-strong);
  }
  @media (max-width: 640px) {
    .node-detail-panel {
      width: 100%;
      transform: translateY(100%);
      border-left: none;
    }
    .node-detail-panel.open {
      transform: translateY(0);
    }
  }
</style>

<div class="app">
  <div class="topbar">
    <div id="topLeft" class="top-left"></div>
    <div class="top-actions">
      <div id="topShare"></div>
      <div id="authSlot"></div>
      <button class="icon-btn" id="themeBtn" title="Theme" aria-label="Toggle theme">◐</button>
    </div>
  </div>
  <div id="view"></div>
</div>

<script>
  (function () {
    const STORE = "dotline.v1";
    const $view = document.getElementById("view");

    // ---------- state ----------
    let db = load();
    function load() {
      try {
        let raw = JSON.parse(localStorage.getItem(STORE));
        if (raw && Array.isArray(raw.notes)) {
          migrateReverseTimes(raw.notes);
          migrateAutoNums(raw.notes);
          migrateNodeDetails(raw.notes);
          return raw;
        }
        // migrate from the old "throughline.v1" key so existing notes survive the rename
        const old = JSON.parse(localStorage.getItem("throughline.v1"));
        if (old && Array.isArray(old.notes)) {
          migrateReverseTimes(old.notes);
          migrateAutoNums(old.notes);
          migrateNodeDetails(old.notes);
          localStorage.setItem(STORE, JSON.stringify(old));
          return old;
        }
      } catch (e) {}
      // seed with one example note
      return {
        notes: [
          {
            id: uid(),
            title: "Morning routine",
            nodes: [
              { id: uid(), name: "Wake up", detail: { title: "", body: "" } },
              { id: uid(), name: "", detail: { title: "", body: "" } },
              { id: uid(), name: "Coffee", detail: { title: "", body: "" } },
            ],
            links: [{ label: "no snooze" }, { label: "" }],
          },
        ],
      };
    }
    // older reverse notes stored time as minutes-of-day and duration as minutes
    function migrateReverseTimes(notes) {
      notes.forEach(n => {
        if (n.type !== "reverse" || !Array.isArray(n.nodes) || !n.nodes.length) return;
        const today = startOfDay(Date.now());
        n.nodes.forEach(node => {
          if (typeof node.time === "number" && node.time >= 0 && node.time < 1440) {
            node.time = today + node.time * 60000;
          }
        });
        if (n.links) {
          n.links.forEach(link => {
            if (typeof link.duration === "number" && Math.abs(link.duration) < 1440) {
              link.duration = link.duration * 60000;
            }
          });
        }
      });
    }
    // give still-default titles a stable per-type number (fixes old "Timing 1" dupes)
    function migrateAutoNums(notes) {
      let nFree = 0,
        nRev = 0;
      notes.forEach(x => {
        if (typeof x.autoNum === "number") {
          if (x.type === "reverse") nRev = Math.max(nRev, x.autoNum);
          else nFree = Math.max(nFree, x.autoNum);
        }
      });
      for (let i = notes.length - 1; i >= 0; i--) {
        // oldest first
        const x = notes[i];
        if (x.autoTitle && typeof x.autoNum !== "number") {
          const rev = x.type === "reverse";
          x.autoNum = rev ? ++nRev : ++nFree;
          x.title = (rev ? "Timing " : "Dot note ") + x.autoNum;
        }
      }
    }
    // ensure every node has an attached note object
    function migrateNodeDetails(notes) {
      notes.forEach(n => {
        if (!Array.isArray(n.nodes)) return;
        n.nodes.forEach(node => {
          if (!node.detail || typeof node.detail !== "object") {
            node.detail = { title: "", body: "" };
          }
        });
      });
    }
    function save() {
      localStorage.setItem(STORE, JSON.stringify(db));
      if (auth.user) schedulePush();
    }
    function uid() {
      return Math.random().toString(36).slice(2, 9);
    }

    // ---------- server sync ----------
    const API = "/notes/api";
    const auth = { user: null, clientId: "" };
    let pushTimer = null;

    async function api(method, path, body) {
      const r = await fetch(API + path, {
        method,
        credentials: "include",
        headers: body ? { "Content-Type": "application/json" } : {},
        body: body ? JSON.stringify(body) : undefined,
      });
      if (!r.ok) {
        const e = new Error("http " + r.status);
        e.status = r.status;
        throw e;
      }
      return r.status === 204 ? null : r.json();
    }

    function schedulePush() {
      setSync(true);
      clearTimeout(pushTimer);
      pushTimer = setTimeout(async () => {
        try {
          await api("PUT", "/notes", { notes: db.notes });
        } catch (e) {}
        setSync(false);
      }, 700);
    }
    function setSync(on) {
      const d = document.getElementById("syncDot");
      if (d) d.classList.toggle("on", on);
    }

    // ---------- routing ----------
    let route = { name: "home", noteId: null };
    function go(name, noteId) {
      route = { name, noteId: noteId || null };
      render();
    }

    // read-only view of a shared note (opened via ?s=<token>)
    let viewOnly = false;
    let sharedNote = null;
    let nowTimer = null; // ticks the "now" line in real-time mode
    let nowCtx = null; // { spine, n } of the current real-time spine (for resize)

    function render() {
      closeNodeDetail();
      if (nowTimer) {
        clearInterval(nowTimer);
        nowTimer = null;
      }
      nowCtx = null;
      if (route.name === "shared") {
        viewOnly = true;
        renderNote(sharedNote);
      } else {
        viewOnly = false;
        if (route.name === "note") renderNote(db.notes.find(n => n.id === route.noteId));
        else renderHome();
      }
      updateTopShare();
    }

    // Share / Make-a-copy lives in the top bar (always visible, never crowded)
    function updateTopShare() {
      const left = document.getElementById("topLeft");
      const slot = document.getElementById("topShare");
      if (!slot || !left) return;
      left.innerHTML = "";
      slot.innerHTML = "";
      if (route.name === "shared" && sharedNote) {
        const b = document.createElement("button");
        b.className = "auth-btn";
        b.textContent = "Make a copy";
        b.onclick = () => makeCopyOfShared(sharedNote);
        slot.appendChild(b);
      } else if (route.name === "note") {
        const n = db.notes.find(x => x.id === route.noteId);
        if (n) {
          // real-time mode toggle (left edge) — timing notes only
          if (n.type === "reverse") {
            const live = document.createElement("button");
            live.className = "auth-btn" + (n.realtime ? " primary" : "");
            live.textContent = n.realtime ? "◉ Real Time" : "◎ Real Time";
            live.title = "Real-time mode: proportional spacing + a moving now-line";
            live.onclick = () => {
              n.realtime = !n.realtime;
              save();
              render();
            };
            left.appendChild(live);
          }
          const b = document.createElement("button");
          b.className = "auth-btn";
          b.textContent = "Share";
          b.title = "Share note";
          b.setAttribute("aria-label", "Share note");
          b.onclick = () => onShare(n);
          slot.appendChild(b);
        }
      }
    }

    // ---------- home ----------
    function renderHome() {
      const el = document.createElement("div");
      el.className = "home";
      el.appendChild(sectionEl("Dotline", false, newNote));
      el.appendChild(sectionEl("Timed dotline", true, newReverseNote));
      swap(el);
    }

    // one home section: a "⊕ Name" header (tap = new note) + a horizontal carousel
    function sectionEl(name, reverse, onCreate) {
      const sec = document.createElement("div");
      sec.className = "section";
      const head = document.createElement("button");
      head.className = "section-head";
      head.innerHTML = `<span class="section-plus">+</span><span class="section-name"></span>`;
      head.querySelector(".section-name").textContent = name;
      head.onclick = onCreate;
      sec.appendChild(head);

      const car = document.createElement("div");
      car.className = "carousel";
      db.notes.forEach(n => {
        if ((n.type === "reverse") === reverse) car.appendChild(cardFor(n));
      });
      sec.appendChild(car);
      return sec;
    }

    // curated palette (coordinated set); each entry has a paired legible text colour
    const CD = "#2B2A3F",
      CW = "#FFFFFF";
    const CARD_COLORS = [
      { bg: "#DED3BE", text: CD },
      { bg: "#D8D7D0", text: CD },
      { bg: "#F5E1A1", text: CD },
      { bg: "#EEBDC5", text: CD },
      { bg: "#D8CD73", text: CD },
      { bg: "#9FBADE", text: CD },
      { bg: "#A3B5B6", text: CD },
      { bg: "#C0AEB3", text: CD },
      { bg: "#E19865", text: CD },
      { bg: "#B0AE6B", text: CD },
      { bg: "#2B2A3F", text: CW },
      { bg: "#683F53", text: CW },
      { bg: "#624349", text: CW },
      { bg: "#8D3436", text: CW },
      { bg: "#2A636C", text: CW },
      { bg: "#CA465A", text: CW },
    ];

    function cardFor(n) {
      const c = document.createElement("button");
      c.className = "card";
      const count = n.nodes.length;
      const isReverse = n.type === "reverse";
      c.innerHTML = `
      <button class="card-del" title="Delete" aria-label="Delete">✕</button>
      <div class="title">${escapeHtml(n.title || "Untitled")}</div>
      <div class="meta">${count} ${isReverse ? pluralEvent(count) : plural(count)}</div>
      <div class="mini"></div>
      <button class="card-paint" title="Recolour" aria-label="Recolour card"></button>
      <button class="card-uncolor" title="Reset colour" aria-label="Reset card colour"></button>`;
      applyCardColor(c, n);
      c.onclick = () => go("note", n.id);
      c.querySelector(".card-del").onclick = e => {
        e.stopPropagation();
        if (confirm('Delete note "' + (n.title || "Untitled") + '"?')) {
          db.notes = db.notes.filter(x => x.id !== n.id);
          save();
          renderHome();
        }
      };
      c.querySelector(".card-paint").onclick = e => {
        e.stopPropagation();
        const cur = n.cardColor ? n.cardColor.bg : null;
        let pick;
        do {
          pick = CARD_COLORS[Math.floor(Math.random() * CARD_COLORS.length)];
        } while (pick.bg === cur && CARD_COLORS.length > 1);
        n.cardColor = pick;
        save();
        applyCardColor(c, n);
      };
      c.querySelector(".card-uncolor").onclick = e => {
        e.stopPropagation();
        n.cardColor = null;
        save();
        applyCardColor(c, n);
      };
      return c;
    }

    // apply (or clear) a card's colour: background + legible text/stripe tone
    function applyCardColor(cardEl, n) {
      const col = n.cardColor;
      cardEl.style.background = col ? col.bg : "";
      cardEl.style.borderColor = col ? col.bg : "";
      cardEl.style.color = col ? col.text : "";
      const title = cardEl.querySelector(".title");
      if (title) title.style.color = col ? col.text : "";
      const meta = cardEl.querySelector(".meta");
      if (meta) {
        meta.style.color = col ? col.text : "";
        meta.style.opacity = col ? ".72" : "";
      }
      const mini = cardEl.querySelector(".mini");
      if (mini) mini.innerHTML = miniSvg(n, col);
      cardEl.classList.toggle("colored", !!col);
    }

    function miniSvg(n, col) {
      const tone = col ? col.text : null;
      const stroke = tone || "var(--line)";
      const doneCol = tone || "var(--ink)";
      const textCol = tone || "var(--faint)";
      // empty dot is filled with the card background so the line never shows THROUGH it
      const holeFill = col ? col.bg : "var(--surface)";
      const shown = Math.min(n.nodes.length, 4);
      const gap = 26,
        top = 6,
        x = 11,
        r = 6;
      const h = top + (shown - 1) * gap + 8 + (n.nodes.length > shown ? 18 : 0);
      let s = `<svg width="100%" height="${h}" viewBox="0 0 160 ${h}">`;
      const y0 = top + 2,
        y1 = top + (shown - 1) * gap + 2;
      s += `<line x1="${x}" y1="${y0}" x2="${x}" y2="${y1}" stroke="${stroke}" stroke-width="2.5"/>`;
      for (let i = 0; i < shown; i++) {
        const cy = top + i * gap + 2;
        const done = n.nodes[i].done;
        s += `<circle cx="${x}" cy="${cy}" r="${r}" fill="${done ? doneCol : holeFill}" stroke="${done ? doneCol : stroke}" stroke-width="2.5"/>`;
        const label =
          n.type === "reverse"
            ? n.nodes[i].name || formatTime(n.nodes[i].time, startOfDay(n.nodes[0].time)) || String(i + 1)
            : n.nodes[i].name || n.nodes[i].alias || String(i + 1);
        s += `<text x="${x + 14}" y="${cy + 4}" font-size="11" fill="${textCol}"${tone ? ' opacity="0.85"' : ""}>${escapeHtml(trunc(label, 16))}</text>`;
      }
      if (n.nodes.length > shown) {
        s += `<text x="${x - 3}" y="${y1 + 16}" font-size="11" fill="${textCol}">+${n.nodes.length - shown}</text>`;
      }
      s += `</svg>`;
      return s;
    }

    // stable auto-number per type (survives reordering; gaps after delete are fine)
    function isReverse(n) {
      return n.type === "reverse";
    }
    function nextAutoNum(reverse) {
      let max = 0;
      db.notes.forEach(x => {
        if (isReverse(x) === reverse && typeof x.autoNum === "number" && x.autoNum > max) max = x.autoNum;
      });
      return max + 1;
    }
    function autoTitleFor(n) {
      if (typeof n.autoNum !== "number") n.autoNum = nextAutoNum(isReverse(n));
      return (isReverse(n) ? "Timing " : "Dot note ") + n.autoNum;
    }

    function newNote() {
      const n = {
        id: uid(),
        type: "free",
        autoNum: nextAutoNum(false),
        autoTitle: true,
        nodes: [{ id: uid(), name: "", detail: { title: "", body: "" } }],
        links: [],
      };
      n.title = autoTitleFor(n);
      db.notes.unshift(n);
      save();
      go("note", n.id);
    }

    function newReverseNote() {
      const n = {
        id: uid(),
        type: "reverse",
        autoNum: nextAutoNum(true),
        autoTitle: true,
        nodes: [{ id: uid(), name: "", time: floorMin(Date.now()), detail: { title: "", body: "" } }],
        links: [],
      };
      n.title = autoTitleFor(n);
      db.notes.unshift(n);
      save();
      go("note", n.id);
    }

    // ---------- note editor ----------
    function renderNote(n) {
      if (!n) {
        go("home");
        return;
      }
      if (n.type === "reverse") {
        renderReverseNote(n);
        return;
      }
      const el = document.createElement("div");
      el.innerHTML = `
      <div class="editor-head">
        <button class="back-btn">‹ Notes</button>
        <textarea class="note-title" placeholder="Note title" rows="1"></textarea>
        <div class="arrow-toggle" role="group" aria-label="Line arrows">
          <button data-arrow="none" title="No arrows">┃</button>
          <button data-arrow="down" title="Arrows point down">↓</button>
          <button data-arrow="up" title="Arrows point up">↑</button>
        </div>
      </div>
      <div class="board"><div class="spine free" id="spine"></div></div>`;
      el.querySelector(".back-btn").onclick = () => go("home");
      // whole-chain arrow direction (a note-level property)
      const toggle = el.querySelector(".arrow-toggle");
      function syncToggle() {
        toggle
          .querySelectorAll("button")
          .forEach(b => b.classList.toggle("on", b.dataset.arrow === (n.arrow || "none")));
      }
      toggle.querySelectorAll("button").forEach(b => {
        b.onclick = () => {
          n.arrow = b.dataset.arrow;
          save();
          syncToggle();
          drawSpine(spine, n);
        };
      });
      syncToggle();
      const title = el.querySelector(".note-title");
      title.value = n.title || "";
      title.oninput = () => {
        n.title = title.value;
        n.autoTitle = false;
        save();
        autoResize(title);
      };
      // auto-generated title clears on focus so the user never types over "Dot note N"
      title.onfocus = () => {
        if (n.autoTitle) {
          n.title = "";
          title.value = "";
          n.autoTitle = false;
          autoResize(title);
        }
      };
      title.onblur = () => {
        if (!title.value.trim()) {
          n.autoTitle = true;
          n.title = autoTitleFor(n);
          title.value = n.title;
          save();
          autoResize(title);
        }
      };

      const spine = el.querySelector("#spine");

      applyEditorChrome(el, n);
      swap(el);
      drawSpine(spine, n);
      autoResize(title);
      if (!viewOnly && n.autoTitle) setTimeout(() => title.focus(), 0);
    }

    function renderReverseNote(n) {
      if (!n) {
        go("home");
        return;
      }
      const el = document.createElement("div");
      el.innerHTML = `
      <div class="editor-head">
        <button class="back-btn">‹ Notes</button>
        <textarea class="note-title" placeholder="Timeline title" rows="1"></textarea>
      </div>
      <div class="board"><div class="spine reverse" id="spine"></div></div>`;
      el.querySelector(".back-btn").onclick = () => go("home");
      const title = el.querySelector(".note-title");
      title.value = n.title || "";
      title.oninput = () => {
        n.title = title.value;
        n.autoTitle = false;
        save();
        autoResize(title);
      };
      title.onfocus = () => {
        if (n.autoTitle) {
          n.title = "";
          title.value = "";
          n.autoTitle = false;
          autoResize(title);
        }
      };
      title.onblur = () => {
        if (!title.value.trim()) {
          n.autoTitle = true;
          n.title = autoTitleFor(n);
          title.value = n.title;
          save();
          autoResize(title);
        }
      };

      const spine = el.querySelector("#spine");

      applyEditorChrome(el, n);
      swap(el);
      drawReverseSpine(spine, n);
      autoResize(title);
      if (!viewOnly && n.autoTitle) setTimeout(() => title.focus(), 0);
    }

    // read-only chrome for a shared note (Share/Make-a-copy live in the top bar)
    function applyEditorChrome(el, n) {
      if (!viewOnly) return;
      const back = el.querySelector(".back-btn");
      const title = el.querySelector(".note-title");
      const toggle = el.querySelector(".arrow-toggle");
      if (toggle) toggle.remove();
      if (title) title.readOnly = true;
      back.textContent = "‹ Close";
      back.onclick = exitShare;
      const banner = document.createElement("div");
      banner.className = "share-banner";
      banner.textContent = "Shared note · read-only";
      el.insertBefore(banner, el.querySelector(".board"));
    }

    // readable plain-text of a note (client knows the timezone, so times are right)
    function noteToText(n) {
      const isRev = n.type === "reverse";
      const anchorDay = isRev && n.nodes[0] ? startOfDay(n.nodes[0].time) : null;
      const lines = [n.title || "Untitled", ""];
      n.nodes.forEach((nd, i) => {
        const left = isRev ? formatTime(nd.time, anchorDay) : nd.alias && nd.alias.length ? nd.alias : String(i + 1);
        const name = nd.name || "";
        lines.push("• " + left + (name ? " — " + name : "") + (nd.done ? " ✓" : ""));
        if (i < n.nodes.length - 1) {
          if (isRev) lines.push("    (" + formatDuration((n.links[i] && n.links[i].duration) || 0) + ")");
          else if (n.links[i] && n.links[i].label) lines.push("    (" + n.links[i].label + ")");
        }
      });
      return lines.join("\n");
    }

    async function onShare(n) {
      try {
        const r = await api("POST", "/share", { note: n, text: noteToText(n) });
        showShare(r.token);
      } catch (e) {
        alert("Could not create a share link.");
      }
    }

    function showShare(token) {
      const appUrl = location.origin + location.pathname + "?s=" + token;
      const textUrl = location.origin + API + "/shared/" + token + "/text";
      const overlay = document.createElement("div");
      overlay.className = "tp-overlay";
      const modal = document.createElement("div");
      modal.className = "tp-modal share-modal";
      modal.innerHTML = `
      <button class="tp-close" type="button" aria-label="Close">✕</button>
      <div class="share-title">Share this note</div>
      <input class="share-url app" readonly value="${escapeAttr(appUrl)}" />
      <button class="share-copy app" type="button">Copy link</button>
      <button class="share-textlink" type="button">Ссылка для твоего ИИ</button>`;
      const close = () => overlay.remove();
      modal.querySelector(".tp-close").onclick = close;
      overlay.onclick = e => {
        if (e.target === overlay) close();
      };
      function wire(btn, url, defText) {
        btn.onclick = async () => {
          try {
            await navigator.clipboard.writeText(url);
          } catch (e) {}
          const t = btn.textContent;
          btn.textContent = defText || "Copied ✓";
          setTimeout(() => {
            btn.textContent = t;
          }, 1200);
        };
      }
      wire(modal.querySelector(".share-copy.app"), appUrl, "Copied ✓");
      wire(modal.querySelector(".share-textlink"), textUrl, "Скопировано ✓");
      overlay.appendChild(modal);
      document.body.appendChild(overlay);
      setTimeout(() => modal.querySelector(".share-url.app").select(), 0);
    }

    function exitShare() {
      history.replaceState(null, "", location.pathname);
      viewOnly = false;
      sharedNote = null;
      go("home");
    }

    function makeCopyOfShared(n) {
      const copy = JSON.parse(JSON.stringify(n));
      copy.id = uid();
      copy.autoNum = nextAutoNum(copy.type === "reverse");
      copy.autoTitle = false;
      if (Array.isArray(copy.nodes)) copy.nodes.forEach(nd => (nd.id = uid()));
      history.replaceState(null, "", location.pathname);
      viewOnly = false;
      sharedNote = null;
      db.notes.unshift(copy);
      save();
      go("note", copy.id);
    }

    function autoResize(ta) {
      ta.style.height = "auto";
      ta.style.height = ta.scrollHeight + "px";
    }

    function drawSpine(spine, n, focusIndex) {
      spine.innerHTML = "";
      const wire = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      wire.classList.add("spine-wire");
      spine.appendChild(wire);

      n.nodes.forEach((node, i) => {
        spine.appendChild(nodeRow(n, node, i, spine));
        if (i < n.nodes.length - 1) spine.appendChild(linkRow(n, i));
      });
      if (!viewOnly) spine.appendChild(ghostRow(n, spine));
      applyArrowStubs(spine, n);
      if (!viewOnly && focusIndex != null) {
        const labels = spine.querySelectorAll(".node-label");
        const t = labels[focusIndex];
        if (t) {
          t.classList.add("fade-in");
          placeCaretEnd(t);
        }
      }
    }

    // Attach a directional arrowhead to each node an arrow points AT, on the side
    // it enters from. The arrowhead is anchored to the dot (via CSS), so the gap
    // to the circle stays identical for plain and featured points.
    function addArrowhead(node, side) {
      node.classList.add(side === "top" ? "arr-in-top" : "arr-in-bottom");
      const a = document.createElement("div");
      a.className = "arrowhead " + (side === "top" ? "down slot-top" : "up slot-bottom");
      node.appendChild(a);
    }
    function applyArrowStubs(spine, n) {
      const els = Array.from(spine.querySelectorAll(".node:not(.ghost)"));
      const dirOf = i => {
        if (n.type === "reverse") {
          const d = (n.links[i] && n.links[i].duration) || 0;
          return d > 0 ? "down" : d < 0 ? "up" : "none";
        }
        return n.arrow === "up" ? "up" : n.arrow === "down" ? "down" : "none";
      };
      for (let i = 0; i < n.nodes.length - 1; i++) {
        const dir = dirOf(i);
        if (dir === "down" && els[i + 1]) addArrowhead(els[i + 1], "top");
        else if (dir === "up" && els[i]) addArrowhead(els[i], "bottom");
      }
    }

    // ghost affordance: dashed connector + dashed grey circle that appends a real node
    function ghostRow(n, spine) {
      const frag = document.createDocumentFragment();
      const link = document.createElement("div");
      link.className = "link ghost";
      const row = document.createElement("div");
      row.className = "node ghost";
      const add = document.createElement("button");
      add.className = "add-dot";
      add.textContent = "+";
      add.title = "Add item";
      add.setAttribute("aria-label", "Add item");
      const hint = document.createElement("span");
      hint.className = "ghost-hint";
      hint.textContent = "add item";
      const doAdd = () => {
        addNodeAt(n, n.nodes.length - 1);
        save();
        drawSpine(spine, n, n.nodes.length - 1);
      };
      add.onclick = doAdd;
      row.append(add, hint);
      frag.append(link, row);
      return frag;
    }

    function nodeRow(n, node, i, spine) {
      const row = document.createElement("div");
      row.className = "node" + (node.done ? " done" : "") + (node.hl ? " hl" : "");
      row.dataset.index = i;

      const alias = document.createElement("div");
      alias.className = "node-alias";
      alias.contentEditable = viewOnly ? "false" : "true";
      alias.spellcheck = false;
      alias.setAttribute("data-ph", String(i + 1));
      setAliasDisplay(alias, node, i);

      alias.onfocus = () => {
        if (alias.classList.contains("is-auto")) {
          alias.textContent = "";
          alias.classList.remove("is-auto");
        }
      };
      alias.oninput = () => {
        node.alias = alias.textContent.trim();
        save();
      };
      alias.onblur = () => {
        node.alias = alias.textContent.trim();
        setAliasDisplay(alias, node, i);
        save();
      };
      alias.onkeydown = e => {
        if (e.key === "Enter") {
          e.preventDefault();
          alias.blur();
        }
      };

      const dot = document.createElement("button");
      dot.className = "dot";
      dot.title = "Toggle done. Drag sideways to delete";
      dot.setAttribute("aria-label", "Toggle done");

      const label = document.createElement("div");
      label.className = "node-label";
      label.contentEditable = viewOnly ? "false" : "true";
      label.spellcheck = false;
      label.setAttribute("data-ph", "item name");
      setNameDisplay(label, node);

      label.onfocus = () => {
        if (label.classList.contains("is-hint")) {
          label.textContent = "";
          label.classList.remove("is-hint");
          setTimeout(() => placeCaretEnd(label), 0);
        }
      };
      label.oninput = () => {
        node.name = label.textContent.trim();
        save();
      };
      label.onblur = () => {
        node.name = label.textContent.trim();
        setNameDisplay(label, node);
        save();
      };
      label.onkeydown = e => {
        // Enter inserts a line break inside the name (multi-line), not a new point
        if (e.key === "Enter") {
          e.preventDefault();
          insertNewlineAtCaret();
          node.name = label.textContent.trim();
          save();
        }
      };

      const wrap = document.createElement("div");
      wrap.className = "node-label-wrap";
      wrap.appendChild(label);
      if (!viewOnly || hasNodeDetail(node)) {
        const noteBtn = document.createElement("button");
        noteBtn.className = "node-note-btn";
        renderNoteBtnContent(noteBtn, node);
        noteBtn.onclick = e => {
          e.stopPropagation();
          if (viewOnly) openNodeDetailReadonly(n, node, i);
          else openNodeDetail(n, node, i);
        };
        wrap.appendChild(noteBtn);
      }

      if (!viewOnly) {
        // keyboard: Enter/Space toggles done, Delete/Backspace removes the node
        dot.onkeydown = e => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            toggleDone(node, row);
          } else if (e.key === "Delete" || e.key === "Backspace") {
            e.preventDefault();
            removeNode(n, i, spine);
          }
        };
        bindDotDrag(dot, row, n, node, i, spine);
      }

      if (viewOnly) row.append(alias, dot, wrap);
      else row.append(makeStar(node, row), alias, dot, wrap);
      return row;
    }

    function setAliasDisplay(alias, node, i) {
      alias.classList.remove("is-auto");
      if (node.alias && node.alias.length) {
        alias.textContent = node.alias;
      } else {
        alias.textContent = String(i + 1);
        alias.classList.add("is-auto");
      }
    }

    function setNameDisplay(label, node) {
      label.classList.remove("is-hint");
      if (node.name && node.name.length) {
        label.textContent = node.name;
      } else {
        label.textContent = "item name";
        label.classList.add("is-hint");
      }
    }

    function hasNodeDetail(node) {
      return !!(node && node.detail && (node.detail.title || node.detail.body));
    }

    const NOTE_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M20 14V7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H13.5M20 14L13.5 20M20 14H15.5C14.3954 14 13.5 14.8954 13.5 16V20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 8H16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 12H12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;

    function renderNoteBtnContent(btn, node) {
      if (hasNodeDetail(node)) {
        btn.classList.add("has-note");
        btn.innerHTML = NOTE_ICON_SVG;
        btn.title = "Open note";
        btn.setAttribute("aria-label", "Open note");
      } else {
        btn.classList.remove("has-note");
        btn.textContent = "›";
        btn.title = "Add note";
        btn.setAttribute("aria-label", "Add note");
      }
    }

    function openNodeDetail(n, node, i) {
      if (viewOnly) return;
      if (!node.detail || typeof node.detail !== "object") {
        node.detail = { title: "", body: "" };
      }
      closeNodeDetail();
      const panel = document.createElement("div");
      panel.className = "node-detail-panel";
      panel.innerHTML = `
        <div class="node-detail-header">
          <button class="node-detail-back" type="button">←</button>
          <input class="node-detail-title" type="text" placeholder="note ${i + 1}" />
        </div>
        <textarea class="node-detail-body" placeholder="Write a note…"></textarea>
        <div class="node-detail-links"></div>
      `;
      const titleInput = panel.querySelector(".node-detail-title");
      const bodyInput = panel.querySelector(".node-detail-body");
      const linksEl = panel.querySelector(".node-detail-links");
      const backBtn = panel.querySelector(".node-detail-back");

      titleInput.placeholder = "note " + (i + 1);
      titleInput.value = node.detail.title || "";
      bodyInput.value = node.detail.body || "";
      updateDetailLinks(node.detail.body, linksEl);

      titleInput.oninput = () => {
        node.detail.title = titleInput.value;
        save();
        updateNodeNoteBtn(n, node);
      };
      titleInput.onblur = () => {
        node.detail.title = titleInput.value;
        save();
        updateNodeNoteBtn(n, node);
      };
      bodyInput.oninput = () => {
        const formatted = formatDetailBullets(bodyInput.value);
        if (formatted !== bodyInput.value) {
          const start = bodyInput.selectionStart;
          bodyInput.value = formatted;
          bodyInput.setSelectionRange(start, start);
        }
        node.detail.body = bodyInput.value;
        updateDetailLinks(node.detail.body, linksEl);
        save();
        updateNodeNoteBtn(n, node);
      };
      bodyInput.onkeydown = e => {
        if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) {
          e.preventDefault();
          continueDetailList(bodyInput);
        }
      };
      backBtn.onclick = () => closeNodeDetail();

      document.body.appendChild(panel);
      panel.offsetHeight; // force reflow
      panel.classList.add("open");
      setTimeout(() => bodyInput.focus(), 50);
    }

    function closeNodeDetail() {
      const panel = document.querySelector(".node-detail-panel");
      if (!panel) return;
      panel.classList.remove("open");
      panel.addEventListener("transitionend", () => panel.remove(), { once: true });
    }

    // Read-only view of an attached note (used in shared view).
    // Same panel layout as the editor, but title/body are rendered divs.
    function openNodeDetailReadonly(n, node, i) {
      if (!viewOnly) return;
      closeNodeDetail();
      if (!node.detail || typeof node.detail !== "object") {
        node.detail = { title: "", body: "" };
      }
      const panel = document.createElement("div");
      panel.className = "node-detail-panel readonly";
      panel.innerHTML = `
        <div class="node-detail-header">
          <button class="node-detail-back" type="button">←</button>
          <div class="node-detail-title-readonly">${escapeHtml(node.detail.title || "note " + (i + 1))}</div>
        </div>
        <div class="node-detail-body-readonly">${linkify(node.detail.body || "").replace(/\n/g, "<br>")}</div>
      `;
      panel.querySelector(".node-detail-back").onclick = () => closeNodeDetail();
      document.body.appendChild(panel);
      panel.offsetHeight; // force reflow
      panel.classList.add("open");
    }

    // In the attached-note body: plain Enter starts a new line.
    // If the current line begins with "- " or "• " we continue the list with "• ".
    // If the current line is exactly "- " or "• " we end the list.
    function formatDetailBullets(value) {
      return value.replace(/^- /gm, "• ");
    }
    function continueDetailList(input) {
      const start = input.selectionStart;
      const end = input.selectionEnd;
      const value = input.value;
      const lineStart = value.lastIndexOf("\n", start - 1) + 1;
      const lineEnd = value.indexOf("\n", start);
      const currentLine = value.slice(lineStart, lineEnd === -1 ? value.length : lineEnd);
      const before = value.slice(0, start);
      const after = value.slice(end);
      let insert = "\n";
      if (/^[•-]\s/.test(currentLine) && currentLine !== "• " && currentLine !== "- ") {
        insert = "\n• ";
      }
      input.value = before + insert + after;
      const pos = start + insert.length;
      input.setSelectionRange(pos, pos);
      input.dispatchEvent(new Event("input", { bubbles: true }));
    }

    function findUrls(text) {
      const urlRe = /https?:\/\/[^\s<>"{}|\\^`[\]]+/gi;
      const urls = [];
      let m;
      while ((m = urlRe.exec(text)) !== null) urls.push(m[0]);
      return urls;
    }

    function updateDetailLinks(text, container) {
      if (!container) return;
      container.innerHTML = "";
      const urls = findUrls(text || "");
      if (!urls.length) return;
      const label = document.createElement("div");
      label.className = "node-detail-links-label";
      label.textContent = urls.length === 1 ? "Link in note" : "Links in note";
      container.appendChild(label);
      urls.forEach(url => {
        const a = document.createElement("a");
        a.href = url;
        a.target = "_blank";
        a.rel = "noopener";
        a.textContent = url;
        container.appendChild(a);
      });
    }

    function updateNodeNoteBtn(n, node) {
      const spine = document.getElementById("spine");
      if (!spine) return;
      const i = n.nodes.indexOf(node);
      if (i < 0) return;
      const row = spine.querySelector('.node[data-index="' + i + '"]');
      if (!row) return;
      const btn = row.querySelector(".node-note-btn");
      if (btn) renderNoteBtnContent(btn, node);
    }

    function linkify(text) {
      const urlRe = /https?:\/\/[^\s<>"{}|\\^`[\]]+/gi;
      return escapeHtml(text).replace(urlRe, url => {
        return `<a href="${escapeAttr(url)}" target="_blank" rel="noopener">${url}</a>`;
      });
    }

    function linkRow(n, i) {
      const row = document.createElement("div");
      // whole-chain arrow direction stored on the note (n.arrow: none|up|down)
      const arr = n.arrow === "up" ? " arr-up" : n.arrow === "down" ? " arr-down" : "";
      row.className = "link" + arr;
      const hasLabel = !!(n.links[i] && n.links[i].label);
      renderLinkContent(row, n, i, hasLabel);
      return row;
    }

    // free-note connector: collapsed = a small dot; expanded = editable "link note".
    // Empty on blur collapses back so nothing dangles between points.
    function renderLinkContent(row, n, i, expanded) {
      // remove only the connector element, keep any .arrow
      const prev = row.querySelector(".link-add, .link-label");
      if (prev) prev.remove();
      // read-only: show the note text if any, otherwise nothing (no add affordance)
      if (viewOnly) {
        const t = (n.links[i] && n.links[i].label) || "";
        if (t) {
          const lab = document.createElement("div");
          lab.className = "link-label";
          lab.textContent = t;
          row.appendChild(lab);
        }
        return;
      }
      if (expanded) {
        const lab = document.createElement("div");
        lab.className = "link-label";
        lab.contentEditable = "true";
        lab.spellcheck = false;
        lab.setAttribute("data-ph", "link note");
        lab.textContent = (n.links[i] && n.links[i].label) || "";
        lab.oninput = () => {
          ensureLink(n, i).label = lab.textContent.trim();
          save();
        };
        lab.onblur = () => {
          const t = lab.textContent.trim();
          ensureLink(n, i).label = t;
          save();
          if (!t) renderLinkContent(row, n, i, false); // collapse back to the dot
        };
        row.appendChild(lab);
      } else {
        const add = document.createElement("button");
        add.className = "link-add";
        add.title = "Add a note here";
        add.setAttribute("aria-label", "Add a note between points");
        add.onclick = () => {
          renderLinkContent(row, n, i, true);
          const l = row.querySelector(".link-label");
          if (l) placeCaretEnd(l);
        };
        row.appendChild(add);
      }
    }
    function ensureLink(n, i) {
      if (!n.links[i]) n.links[i] = { label: "" };
      return n.links[i];
    }

    function addNodeAt(n, i) {
      n.nodes.splice(i + 1, 0, { id: uid(), name: "", detail: { title: "", body: "" } });
      n.links.splice(i, 0, { label: "" });
    }

    // tapping the dot toggles done; finishing a point also clears its highlight
    function toggleDone(node, row) {
      node.done = !node.done;
      if (node.done && node.hl) {
        node.hl = false;
        row.classList.remove("hl");
        const star = row.querySelector(".hl-star");
        if (star) star.textContent = "☆"; // ☆
      }
      save();
      row.classList.toggle("done", node.done);
    }

    // small star at the far left that toggles the point's highlight
    function makeStar(node, row) {
      const star = document.createElement("button");
      star.className = "hl-star";
      star.textContent = node.hl ? "★" : "☆"; // ★ / ☆
      star.title = "Highlight";
      star.setAttribute("aria-label", "Highlight point");
      star.onclick = e => {
        e.stopPropagation();
        node.hl = !node.hl;
        row.classList.toggle("hl", node.hl);
        star.textContent = node.hl ? "★" : "☆";
        save();
      };
      return star;
    }

    // shared node removal used by drag-delete, the delete button, and keyboard
    function removeNode(n, i, spine, opts) {
      opts = opts || {};
      if (n.nodes.length <= 1) return;
      const node = n.nodes[i];
      if (hasNodeDetail(node)) {
        if (!confirm("This point has a note. Delete it too?")) return;
      }
      if (opts.onDelete) opts.onDelete(i);
      else {
        n.nodes.splice(i, 1);
        n.links.splice(Math.min(i, n.links.length - 1), 1);
        save();
      }
      (opts.draw || drawSpine)(spine, n);
    }

    // ---------- reverse timeline ----------
    function drawReverseSpine(spine, n, focusIndex) {
      if (nowTimer) {
        clearInterval(nowTimer);
        nowTimer = null;
      } // avoid timer pile-up on re-draw
      nowCtx = null;
      spine.innerHTML = "";
      const wire = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      wire.classList.add("spine-wire");
      spine.appendChild(wire);
      updateReverseTimes(n);
      n.nodes.forEach((node, i) => {
        spine.appendChild(reverseNodeRow(n, node, i, spine));
        if (i < n.nodes.length - 1) spine.appendChild(reverseLinkRow(n, i, spine));
      });
      if (!viewOnly) spine.appendChild(reverseGhostRow(n, spine));
      applyArrowStubs(spine, n);
      if (n.realtime) {
        nowCtx = { spine, n };
        positionNowLine(spine, n);
        nowTimer = setInterval(() => positionNowLine(spine, n), 30000);
      }
      if (!viewOnly && focusIndex != null) {
        const labels = spine.querySelectorAll(".node-label");
        const t = labels[focusIndex];
        if (t) {
          t.classList.add("fade-in");
          placeCaretEnd(t);
        }
      }
    }

    // ---- living "now" wave -------------------------------------------------
    // A dashed line that behaves like calm water: a few sine components of very
    // different (wide) wavelength, speed and direction are summed, each with its
    // amplitude slowly modulated, so the crests drift gently and swell/ebb without
    // ever looking periodic. Wide, unhurried — a lake, not a choppy sea.
    const NOW_W = 120,
      NOW_CY = 12; // viewBox space (0..120 × 0..24)
    const NOW_WAVES = [
      { A: 3.6, k: (2 * Math.PI) / 150, w: 0.28, p: 0.0, mA: 0.22, mW: 0.16, mP: 0.0 },
      { A: 2.4, k: (2 * Math.PI) / 96, w: -0.4, p: 1.7, mA: 0.28, mW: 0.24, mP: 1.1 },
      { A: 1.2, k: (2 * Math.PI) / 63, w: 0.52, p: 3.1, mA: 0.3, mW: 0.33, mP: 2.3 },
    ];
    let nowWaveRAF = null;
    const nowReduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    function nowWavePath(t) {
      const N = 30,
        pts = [];
      for (let i = 0; i <= N; i++) {
        const x = (NOW_W * i) / N;
        let y = NOW_CY;
        for (const c of NOW_WAVES) {
          const a = c.A * (1 + c.mA * Math.sin(c.mW * t + c.mP));
          y += a * Math.sin(c.k * x + c.w * t + c.p);
        }
        pts.push([x, y]);
      }
      let d = `M0,${pts[0][1].toFixed(2)}`;
      for (let i = 0; i < N; i++) {
        const p0 = pts[i - 1] || pts[i],
          p1 = pts[i],
          p2 = pts[i + 1],
          p3 = pts[i + 2] || pts[i + 1];
        const c1x = p1[0] + (p2[0] - p0[0]) / 6,
          c1y = p1[1] + (p2[1] - p0[1]) / 6;
        const c2x = p2[0] - (p3[0] - p1[0]) / 6,
          c2y = p2[1] - (p3[1] - p1[1]) / 6;
        d += `C${c1x.toFixed(2)},${c1y.toFixed(2)} ${c2x.toFixed(2)},${c2y.toFixed(2)} ${p2[0].toFixed(2)},${p2[1].toFixed(2)}`;
      }
      return d;
    }

    function nowWaveFrame(ts) {
      const path = document.querySelector(".now-wave path");
      if (!path) {
        nowWaveRAF = null;
        return;
      } // line gone → stop the loop
      path.setAttribute("d", nowWavePath(ts / 1000));
      nowWaveRAF = requestAnimationFrame(nowWaveFrame);
    }

    function startNowWave() {
      if (nowReduceMotion) return; // keep the static fallback wave
      if (!nowWaveRAF) nowWaveRAF = requestAnimationFrame(nowWaveFrame);
    }

    // place the dashed "now" line at the vertical position of the current time,
    // interpolating between the two dots whose times bracket now (real-time mode)
    function positionNowLine(spine, n) {
      let line = spine.querySelector(".now-line");
      if (n.type !== "reverse" || n.nodes.length < 2) {
        if (line) line.remove();
        return;
      }
      if (!line) {
        line = document.createElement("div");
        line.className = "now-line";
        line.innerHTML = `
        <svg class="now-wave" viewBox="0 0 120 24" preserveAspectRatio="none" aria-hidden="true">
          <defs><linearGradient id="nowg">
            <stop class="s-edge" offset="0"/><stop class="s-mid" offset="0.5"/><stop class="s-edge" offset="1"/>
          </linearGradient></defs>
          <path fill="none" stroke="url(#nowg)" stroke-width="2" stroke-dasharray="7 6"
                stroke-linecap="round" vector-effect="non-scaling-stroke"
                d="M0,12 Q15,4 30,12 Q45,20 60,12 Q75,4 90,12 Q105,20 120,12"/>
        </svg>
        <span class="now-label"></span>`;
        spine.appendChild(line);
        startNowWave(spine);
      }
      const now = Date.now();
      const els = Array.from(spine.querySelectorAll(".node:not(.ghost)"));
      const sr = spine.getBoundingClientRect();
      const yOf = el => {
        const d = el.querySelector(".dot") || el;
        const r = d.getBoundingClientRect();
        return r.top + r.height / 2 - sr.top;
      };
      let y = null;
      for (let i = 0; i < n.nodes.length - 1; i++) {
        const t0 = n.nodes[i].time,
          t1 = n.nodes[i + 1].time;
        if (t0 === t1) continue;
        if (now >= Math.min(t0, t1) && now <= Math.max(t0, t1)) {
          const frac = (now - t0) / (t1 - t0);
          y = yOf(els[i]) + frac * (yOf(els[i + 1]) - yOf(els[i]));
          break;
        }
      }
      if (y == null) {
        line.style.display = "none";
        return;
      } // now outside the plan's range
      line.style.display = "";
      line.style.top = y + "px";
      line.querySelector(".now-label").textContent = "now " + formatTime(now, startOfDay(n.nodes[0].time));
    }

    function reverseNodeRow(n, node, i, spine) {
      const row = document.createElement("div");
      row.className = "node" + (node.done ? " done" : "") + (node.hl ? " hl" : "");
      row.dataset.index = i;

      const anchorDay = startOfDay(n.nodes[0].time);
      const alias = document.createElement("div");
      alias.className = "node-alias";
      const timeSpan = document.createElement("span");
      timeSpan.className = "alias-time";
      timeSpan.textContent = formatTime(node.time, anchorDay);
      alias.appendChild(timeSpan);
      // flag the exact point where time REVERSES direction (a peak/valley): the
      // segment before it and the segment after it go opposite ways. First/last
      // points can't reverse (only one adjacent segment), so they're never flagged.
      if (i >= 1 && i < n.nodes.length - 1) {
        const before = node.time - n.nodes[i - 1].time;
        const after = n.nodes[i + 1].time - node.time;
        if (before !== 0 && after !== 0 && Math.sign(before) !== Math.sign(after)) {
          row.classList.add("chrono-violation");
          const hint = document.createElement("div");
          hint.className = "chrono-hint";
          hint.textContent = "out of order";
          alias.appendChild(hint);
        }
      }
      if (!viewOnly) {
        alias.onclick = () => {
          openTimePicker({
            anchorTime: n.nodes[0].time,
            previousTime: i > 0 ? n.nodes[i - 1].time : n.nodes[0].time,
            currentTime: node.time,
            isAnchor: i === 0,
            onApply: (baseTime, duration) => {
              node.time = baseTime;
              if (i > 0 && n.links[i - 1]) n.links[i - 1].duration = duration;
              updateReverseTimes(n);
              save();
              drawReverseSpine(spine, n);
            },
          });
        };
        alias.title = "Click to edit time";
      }

      const dot = document.createElement("button");
      dot.className = "dot";
      dot.title = "Toggle done. Drag sideways to delete";
      dot.setAttribute("aria-label", "Toggle done");

      // analog clock face inside the dot (reverse timeline only)
      const hourHand = document.createElement("div");
      hourHand.className = "clock-hand hour";
      const minuteHand = document.createElement("div");
      minuteHand.className = "clock-hand minute";
      const cap = document.createElement("div");
      cap.className = "clock-cap";
      dot.append(hourHand, minuteHand, cap);
      setClockHands(dot, node.time);

      const label = document.createElement("div");
      label.className = "node-label";
      label.contentEditable = viewOnly ? "false" : "true";
      label.spellcheck = false;
      label.setAttribute("data-ph", "event");
      setNameDisplay(label, node);

      label.onfocus = () => {
        if (label.classList.contains("is-hint")) {
          label.textContent = "";
          label.classList.remove("is-hint");
          setTimeout(() => placeCaretEnd(label), 0);
        }
      };
      label.oninput = () => {
        node.name = label.textContent.trim();
        save();
      };
      label.onblur = () => {
        node.name = label.textContent.trim();
        setNameDisplay(label, node);
        save();
      };
      label.onkeydown = e => {
        if (e.key === "Enter") {
          e.preventDefault();
          insertNewlineAtCaret();
          node.name = label.textContent.trim();
          save();
        }
      };

      const wrap = document.createElement("div");
      wrap.className = "node-label-wrap";
      wrap.appendChild(label);
      if (!viewOnly || hasNodeDetail(node)) {
        const noteBtn = document.createElement("button");
        noteBtn.className = "node-note-btn";
        renderNoteBtnContent(noteBtn, node);
        noteBtn.onclick = e => {
          e.stopPropagation();
          if (viewOnly) openNodeDetailReadonly(n, node, i);
          else openNodeDetail(n, node, i);
        };
        wrap.appendChild(noteBtn);
      }

      const revOpts = {
        draw: drawReverseSpine,
        onAdd: i => addReverseNodeAt(n, i),
        onDelete: i => {
          if (n.nodes.length <= 1) return;
          if (i > 0 && i < n.links.length) {
            n.links[i - 1].duration = (n.links[i - 1].duration || 0) + (n.links[i].duration || 0);
          }
          n.nodes.splice(i, 1);
          n.links.splice(Math.min(i, n.links.length - 1), 1);
          updateReverseTimes(n);
          save();
        },
      };

      if (!viewOnly) {
        dot.onkeydown = e => {
          if (e.key === "Enter" || e.key === " ") {
            e.preventDefault();
            toggleDone(node, row);
          } else if (e.key === "Delete" || e.key === "Backspace") {
            e.preventDefault();
            removeNode(n, i, spine, revOpts);
          }
        };
        bindDotDrag(dot, row, n, node, i, spine, revOpts);
      }

      if (viewOnly) row.append(alias, dot, wrap);
      else row.append(makeStar(node, row), alias, dot, wrap);
      return row;
    }

    function reverseLinkRow(n, i, spine) {
      const row = document.createElement("div");
      // arrow follows time: next later than prev -> points DOWN at the lower dot;
      // next earlier -> points UP at the upper dot; equal -> no arrow
      const dur = n.links[i].duration || 0;
      row.className = "link" + (dur > 0 ? " arr-down" : dur < 0 ? " arr-up" : "");
      // real-time mode: segment height is proportional to its duration (1h < 2h)
      if (n.realtime) {
        const mins = Math.abs(dur) / MS_MIN;
        row.style.minHeight = Math.max(46, Math.min(380, Math.round(mins * 1.5))) + "px";
      }
      const lab = document.createElement("div");
      lab.className = "link-label interval";
      lab.setAttribute("data-ph", "interval");
      lab.textContent = formatDuration(n.links[i].duration || 0);
      if (!viewOnly) {
        lab.onclick = () => {
          openDurationPicker({
            anchorTime: n.nodes[0].time,
            previousTime: n.nodes[i].time,
            currentDuration: n.links[i].duration || 0,
            onApply: durationMs => {
              n.links[i].duration = durationMs;
              updateReverseTimes(n);
              save();
              drawReverseSpine(spine, n);
            },
          });
        };
      }
      row.appendChild(lab);
      return row;
    }

    function reverseGhostRow(n, spine) {
      const frag = document.createDocumentFragment();
      const link = document.createElement("div");
      link.className = "link ghost";
      const row = document.createElement("div");
      row.className = "node ghost";
      const add = document.createElement("button");
      add.className = "add-dot";
      add.textContent = "+";
      add.title = "Add event";
      add.setAttribute("aria-label", "Add event");
      const hint = document.createElement("span");
      hint.className = "ghost-hint";
      hint.textContent = "add event";
      const doAdd = () => {
        const last = n.nodes[n.nodes.length - 1];
        // full time picker (date + time + slider); default is previous − 30 min
        openTimePicker({
          anchorTime: n.nodes[0].time,
          previousTime: last.time,
          onApply: (baseTime, duration) => {
            n.nodes.push({ id: uid(), name: "", time: baseTime });
            n.links.push({ duration: duration });
            save();
            drawReverseSpine(spine, n, n.nodes.length - 1);
          },
        });
      };
      add.onclick = doAdd;
      row.append(add, hint);
      frag.append(link, row);
      return frag;
    }

    // reverse events use timestamps (ms) so dates beyond "today" are possible
    const MS_MIN = 60000;

    // event times are edited in whole minutes; strip stray seconds/ms so interval
    // deltas come out exact (e.g. -30 min, not -31)
    function floorMin(ts) {
      return ts - (((ts % MS_MIN) + MS_MIN) % MS_MIN);
    }

    function startOfDay(ts) {
      const d = new Date(ts || Date.now());
      d.setHours(0, 0, 0, 0);
      return d.getTime();
    }
    function minutesSinceMidnight(ts) {
      const d = new Date(ts);
      return d.getHours() * 60 + d.getMinutes();
    }
    function formatTimeInput(minutes) {
      let h = Math.floor(minutes / 60) % 24;
      if (h < 0) h += 24;
      const m = Math.abs(minutes % 60);
      return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m);
    }
    function formatDateInput(ts) {
      const d = new Date(ts);
      const tzOffset = d.getTimezoneOffset() * MS_MIN;
      return new Date(ts - tzOffset).toISOString().slice(0, 10);
    }
    function isSameDay(a, b) {
      const d1 = new Date(a),
        d2 = new Date(b);
      return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
    }

    function parseDuration(s) {
      if (!s) return null;
      s = String(s).trim().toLowerCase().replace(/\s+/g, " ");
      const num = Number(s);
      if (!isNaN(num) && s !== "") return Math.round(num * 60) * MS_MIN;
      let m = s.match(/^(?:\+?\s*)?(\d+)\s*h(?:ours?)?(?:\s*(\d+)\s*m(?:in)?)?$/);
      if (m) return (parseInt(m[1], 10) * 60 + (m[2] ? parseInt(m[2], 10) : 0)) * MS_MIN;
      m = s.match(/^(?:\+?\s*)?(\d+)\s*m(?:in)?(?:utes?)?$/);
      if (m) return parseInt(m[1], 10) * MS_MIN;
      m = s.match(/^(?:\+?\s*)?(\d+)\s*h(?:ours?)?$/);
      if (m) return parseInt(m[1], 10) * 60 * MS_MIN;
      m = s.match(/^(?:\+?\s*)?(\d+)[:.](\d+)\s*h?$/);
      if (m) return (parseInt(m[1], 10) * 60 + parseInt(m[2], 10)) * MS_MIN;
      return null;
    }

    function formatDuration(ms) {
      let minutes = Math.round(ms / MS_MIN);
      const sign = minutes < 0 ? "-" : "";
      minutes = Math.abs(minutes);
      if (minutes === 0) return "0 min";
      const h = Math.floor(minutes / 60);
      const m = minutes % 60;
      if (h > 0 && m > 0) return sign + h + " h " + m + " min";
      if (h > 0) return sign + h + " h";
      return sign + m + " min";
    }

    function formatTime(timestamp, anchorDay) {
      const d = new Date(timestamp);
      const h = d.getHours();
      const m = d.getMinutes();
      const timeStr = (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m);
      const ref = anchorDay || startOfDay(Date.now());
      if (isSameDay(timestamp, ref)) return timeStr;
      const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
      return timeStr + " · " + months[d.getMonth()] + " " + d.getDate();
    }

    function setClockHands(dot, timestamp) {
      const d = new Date(timestamp);
      const hourHand = dot.querySelector(".clock-hand.hour");
      const minuteHand = dot.querySelector(".clock-hand.minute");
      const hourAngle = ((d.getHours() % 12) + d.getMinutes() / 60) * 30;
      const minuteAngle = d.getMinutes() * 6;
      if (hourHand) hourHand.style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;
      if (minuteHand) minuteHand.style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;
    }

    function updateReverseTimes(n) {
      // heal older notes whose anchor still carries seconds/ms
      if (n.nodes[0]) n.nodes[0].time = floorMin(n.nodes[0].time);
      for (let i = 1; i < n.nodes.length; i++) {
        n.nodes[i].time = n.nodes[i - 1].time + (n.links[i - 1].duration || 0);
      }
    }

    function addReverseNodeAt(n, i) {
      const prevTime = n.nodes[i].time;
      const dur = -30 * MS_MIN; // reverse: next event is 30 min earlier
      n.nodes.splice(i + 1, 0, { id: uid(), name: "", time: prevTime + dur, detail: { title: "", body: "" } });
      n.links.splice(i, 0, { duration: dur });
    }

    // ---------- time picker modal ----------
    function openTimePicker(opts) {
      const previousTime = opts.previousTime != null ? opts.previousTime : opts.anchorTime;
      const isEdit = opts.currentTime != null;
      const isAnchor = !!opts.isAnchor;
      // a new event defaults to half an hour EARLIER than the previous one
      const currentTime = isEdit ? opts.currentTime : previousTime - 30 * MS_MIN;
      let selectedDay = startOfDay(currentTime);
      let selectedMin = minutesSinceMidnight(currentTime);

      const overlay = document.createElement("div");
      overlay.className = "tp-overlay";
      const modal = document.createElement("div");
      modal.className = "tp-modal";
      modal.innerHTML = `
      <button class="tp-close" type="button" aria-label="Close">✕</button>
      <div class="tp-hero">
        <input class="tp-hero-time" type="text" inputmode="numeric" value="${formatTimeInput(selectedMin)}" aria-label="Time HH:MM" />
        ${isAnchor ? "" : `<div class="tp-sub"></div>`}
      </div>
      ${
        isAnchor
          ? ""
          : `
      <div class="tp-field">
        <input class="tp-slider" type="range" min="-6" max="6" step="0.25" value="0" />
      </div>`
      }
      <div class="tp-field tp-date">
        <label class="tp-date-button">
          <span class="tp-date-display">${formatDateLabel(selectedDay)}</span>
          <input class="tp-date-input" type="date" value="${formatDateInput(selectedDay)}" />
        </label>
      </div>
      <div class="tp-actions">
        <button class="tp-apply" type="button" aria-label="Apply">✓</button>
      </div>`;

      const timeInput = modal.querySelector(".tp-hero-time");
      const slider = modal.querySelector(".tp-slider"); // null for the anchor
      const dateInput = modal.querySelector(".tp-date-input");
      const dateDisplay = modal.querySelector(".tp-date-display");
      const sub = modal.querySelector(".tp-sub");

      function formatDateLabel(ts) {
        if (isSameDay(ts, Date.now())) return "Today";
        const d = new Date(ts);
        const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        return months[d.getMonth()] + " " + d.getDate();
      }

      // accept "13:30", "1330", "930", "9" etc.
      function readTimeInput() {
        let h, m;
        if (timeInput.value.includes(":")) {
          const [hh, mm] = timeInput.value.split(":");
          h = parseInt(hh, 10);
          m = parseInt(mm, 10);
        } else {
          const d = timeInput.value.replace(/[^0-9]/g, "");
          if (d.length >= 3) {
            h = parseInt(d.slice(0, d.length - 2), 10);
            m = parseInt(d.slice(-2), 10);
          } else {
            h = parseInt(d, 10);
            m = 0;
          }
        }
        if (isNaN(h)) h = 0;
        if (isNaN(m)) m = 0;
        h = Math.max(0, Math.min(23, h));
        m = Math.max(0, Math.min(59, m));
        selectedMin = h * 60 + m;
      }

      function result() {
        return selectedDay + selectedMin * MS_MIN;
      }

      // the slider is just a live view of the offset from the point above; the big
      // time and the sub always reflect the same value so nothing fights
      function syncSlider() {
        if (slider) slider.value = Math.max(-6, Math.min(6, (result() - previousTime) / (60 * MS_MIN)));
      }
      function updateSub() {
        if (!sub) return;
        const dur = result() - previousTime;
        const mag = formatDuration(Math.abs(dur));
        sub.textContent = dur === 0 ? "same time" : mag + (dur < 0 ? " earlier" : " later");
      }

      timeInput.oninput = () => {
        readTimeInput();
        syncSlider();
        updateSub();
      };
      timeInput.onfocus = () => {
        if (timeInput.select) timeInput.select();
      };
      timeInput.onblur = () => {
        readTimeInput();
        timeInput.value = formatTimeInput(selectedMin);
        syncSlider();
        updateSub();
      };

      if (slider)
        slider.oninput = () => {
          const t = previousTime + (parseFloat(slider.value) || 0) * 60 * MS_MIN;
          selectedDay = startOfDay(t);
          selectedMin = minutesSinceMidnight(t);
          timeInput.value = formatTimeInput(selectedMin);
          dateDisplay.textContent = formatDateLabel(selectedDay);
          updateSub();
        };

      dateInput.oninput = () => {
        if (dateInput.value) {
          const [y, mo, d] = dateInput.value.split("-").map(Number);
          selectedDay = new Date(y, mo - 1, d).getTime();
        }
        dateDisplay.textContent = formatDateLabel(selectedDay);
        syncSlider();
        updateSub();
      };
      // reliably open the native calendar on click (a transparent date input alone
      // doesn't open it in Chrome — needs showPicker())
      const dateBtn = modal.querySelector(".tp-date-button");
      dateBtn.addEventListener("click", e => {
        e.preventDefault();
        if (dateInput.showPicker) {
          try {
            dateInput.showPicker();
            return;
          } catch (err) {}
        }
        dateInput.focus();
        dateInput.click();
      });

      modal.querySelector(".tp-close").onclick = () => overlay.remove();
      modal.querySelector(".tp-apply").onclick = () => {
        readTimeInput();
        const base = result();
        opts.onApply(base, base - previousTime);
        overlay.remove();
      };

      modal.tabIndex = -1;
      modal.addEventListener("keydown", e => {
        e.stopPropagation();
        if (e.key === "Enter") {
          e.preventDefault();
          modal.querySelector(".tp-apply").click();
        } else if (e.key === "Escape") {
          e.preventDefault();
          overlay.remove();
        }
      });

      overlay.onclick = e => {
        if (e.target === overlay) overlay.remove();
      };
      overlay.appendChild(modal);
      document.body.appendChild(overlay);
      syncSlider();
      updateSub();
      setTimeout(() => timeInput.focus(), 0);
    }

    // ---------- interval picker (reverse timeline) ----------
    function openDurationPicker(opts) {
      const anchorDay = startOfDay(opts.anchorTime);
      const previousTime = opts.previousTime;
      let durationMs = opts.currentDuration || 0;

      const overlay = document.createElement("div");
      overlay.className = "tp-overlay";
      const modal = document.createElement("div");
      modal.className = "tp-modal";
      modal.innerHTML = `
      <button class="tp-close" type="button" aria-label="Close">✕</button>
      <div class="tp-hero">
        <input class="tp-hero-value" type="text" value="${formatDuration(durationMs)}" />
        <div class="tp-sub"></div>
      </div>
      <div class="tp-field">
        <input class="tp-slider" type="range" min="-6" max="6" step="0.25" value="${Math.max(-6, Math.min(6, durationMs / (60 * MS_MIN)))}" />
      </div>
      <div class="tp-actions">
        <button class="tp-apply" type="button" aria-label="Apply">✓</button>
      </div>`;

      const heroInput = modal.querySelector(".tp-hero-value");
      const slider = modal.querySelector(".tp-slider");
      const sub = modal.querySelector(".tp-sub");
      let typing = false;

      function syncSlider() {
        slider.value = Math.max(-6, Math.min(6, durationMs / (60 * MS_MIN)));
      }
      function updateSub() {
        sub.textContent = "→ " + formatTime(previousTime + durationMs, anchorDay);
      }
      function refreshHero() {
        if (!typing) heroInput.value = formatDuration(durationMs);
      }

      slider.oninput = () => {
        durationMs = (parseFloat(slider.value) || 0) * 60 * MS_MIN;
        refreshHero();
        updateSub();
      };
      heroInput.onfocus = () => {
        typing = true;
      };
      heroInput.oninput = () => {
        // allow a leading minus for the reverse direction (parseDuration is unsigned)
        const s = heroInput.value.trim();
        const neg = /^[-−]/.test(s);
        const parsed = parseDuration(s.replace(/^[-−+]\s*/, ""));
        if (parsed != null) {
          durationMs = neg ? -parsed : parsed;
          syncSlider();
          updateSub();
        }
      };
      heroInput.onblur = () => {
        typing = false;
        heroInput.value = formatDuration(durationMs);
      };

      modal.querySelector(".tp-close").onclick = () => overlay.remove();
      modal.querySelector(".tp-apply").onclick = () => {
        opts.onApply(durationMs);
        overlay.remove();
      };

      modal.tabIndex = -1;
      modal.addEventListener("keydown", e => {
        e.stopPropagation();
        if (e.key === "Enter") {
          e.preventDefault();
          modal.querySelector(".tp-apply").click();
        } else if (e.key === "Escape") {
          e.preventDefault();
          overlay.remove();
        }
      });

      overlay.onclick = e => {
        if (e.target === overlay) overlay.remove();
      };
      overlay.appendChild(modal);
      document.body.appendChild(overlay);
      updateSub();
      setTimeout(() => heroInput.focus(), 0);
    }

    // ---------- swipe-to-delete wire (drawn over CSS rail only while dragging) ----------
    let dragState = null;

    function getDotCenter(row, wire) {
      const dot = row.querySelector(".dot");
      const wr = wire.getBoundingClientRect();
      if (!dot) {
        // ghost add-node has no .dot; use the row center
        const rr = row.getBoundingClientRect();
        return { x: rr.left + rr.width / 2 - wr.left, y: rr.top + rr.height / 2 - wr.top };
      }
      const dr = dot.getBoundingClientRect();
      return { x: dr.left + dr.width / 2 - wr.left, y: dr.top + dr.height / 2 - wr.top };
    }

    function updateWire(spine, draggedIndex, dx) {
      const wire = spine.querySelector(".spine-wire");
      if (!wire) return;
      wire.innerHTML = "";
      if (dragState == null || dx == null) return;
      const nodes = Array.from(spine.querySelectorAll(".node:not(.ghost)"));
      if (nodes.length < 2) return;
      const threshold = 120;
      const i = draggedIndex;

      function pathSeg(a, b) {
        // straight line from the neighbor dot to the dragged dot (two straight segments)
        const d = `M ${a.x},${a.y} L ${b.x},${b.y}`;
        const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
        p.setAttribute("d", d);
        // the further the dot is pulled, the more the string fades out
        const pull = Math.min(Math.abs(dx) / threshold, 1);
        p.style.opacity = String(1 - pull * 0.85);
        if (dragState && dragState.snapping) p.classList.add("snapping");
        return p;
      }

      if (i > 0) {
        const a = getDotCenter(nodes[i - 1], wire);
        const b = getDotCenter(nodes[i], wire);
        wire.appendChild(pathSeg(a, b));
      }
      if (i < nodes.length - 1) {
        const a = getDotCenter(nodes[i], wire);
        const b = getDotCenter(nodes[i + 1], wire);
        wire.appendChild(pathSeg(a, b));
      }
      // (last dot: nothing to pull to below — the ghost tail is hidden during drag)
    }

    function bindDotDrag(dot, row, n, node, i, spine, opts = {}) {
      let neighbors = [];
      let hints = [];
      const doDraw = opts.draw || drawSpine;
      // firm enough to avoid accidents, but much shorter on touch (small screens)
      let THRESH = 84;

      function addHints() {
        const left = document.createElement("div");
        left.className = "drag-hint left";
        left.textContent = "← Delete";
        const right = document.createElement("div");
        right.className = "drag-hint right";
        right.textContent = "Add →";
        row.append(left, right);
        hints = [left, right]; // [0] left = delete, [1] right = add
      }
      function clearHints() {
        hints.forEach(h => h.remove());
        hints = [];
      }

      const onPointerDown = e => {
        if (e.button !== 0) return;
        e.preventDefault();
        // dragging isn't typing — drop any focused field so the mobile keyboard hides
        if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
        THRESH = e.pointerType === "touch" ? 30 : 80;
        dot.setPointerCapture(e.pointerId);
        row.classList.add("dragging");
        const nodes = Array.from(spine.querySelectorAll(".node:not(.ghost)"));
        const links = Array.from(spine.querySelectorAll(".link:not(.ghost)"));
        neighbors = [row];
        if (i > 0) {
          neighbors.push(nodes[i - 1]);
          neighbors.push(links[i - 1]);
        }
        if (i < nodes.length - 1) {
          neighbors.push(links[i]);
          neighbors.push(nodes[i + 1]);
        } else {
          // dragging the last dot: hide the whole ghost tail (dashed line + "+")
          const ghostLink = spine.querySelector(".link.ghost");
          const ghostNode = spine.querySelector(".node.ghost");
          if (ghostLink) neighbors.push(ghostLink);
          if (ghostNode) neighbors.push(ghostNode);
        }
        neighbors.forEach(el => el.classList.add("wire-hidden"));
        addHints();
        dragState = { row, nodeIndex: i, startX: e.clientX, dx: 0, spine, snapping: false };
        dot.addEventListener("pointermove", onPointerMove);
        dot.addEventListener("pointerup", onPointerUp);
        dot.addEventListener("pointercancel", onPointerUp);
      };
      const onPointerMove = e => {
        if (!dragState) return;
        const dx = e.clientX - dragState.startX;
        dragState.dx = dx;
        row.style.setProperty("--snap-dx", dx + "px");
        row.style.transform = `translateX(${dx}px)`;
        if (hints[0]) hints[0].classList.toggle("armed", dx <= -THRESH); // left = delete
        if (hints[1]) hints[1].classList.toggle("armed", dx >= THRESH); // right = add
        updateWire(spine, i, dx);
      };
      const onPointerUp = e => {
        if (!dragState) return;
        dot.releasePointerCapture(e.pointerId);
        dot.removeEventListener("pointermove", onPointerMove);
        dot.removeEventListener("pointerup", onPointerUp);
        dot.removeEventListener("pointercancel", onPointerUp);
        neighbors.forEach(el => el.classList.remove("wire-hidden"));
        neighbors = [];
        clearHints();
        const dx = dragState.dx;

        if (dx <= -THRESH && n.nodes.length > 1) {
          // release LEFT → delete
          if (hasNodeDetail(n.nodes[i])) {
            if (!confirm("This point has a note. Delete it too?")) {
              dragState = null;
              row.classList.remove("dragging");
              row.classList.add("snap-back");
              row.style.transform = "";
              updateWire(spine);
              setTimeout(() => row.classList.remove("snap-back"), 250);
              return;
            }
          }
          dragState.snapping = true;
          updateWire(spine, i, dx);
          row.classList.remove("dragging");
          row.classList.add("removing");
          setTimeout(() => {
            dragState = null;
            removeNode(n, i, spine, opts);
          }, 220);
        } else if (dx >= THRESH) {
          // release RIGHT → add a point below
          dragState = null;
          row.classList.remove("dragging");
          row.style.transform = "";
          updateWire(spine);
          if (opts.onAdd) opts.onAdd(i);
          else addNodeAt(n, i);
          save();
          doDraw(spine, n, i + 1);
        } else {
          // snap back; a tiny pull is treated as a tap (toggle done)
          dragState = null;
          row.classList.remove("dragging");
          row.classList.add("snap-back");
          row.style.transform = "";
          updateWire(spine);
          setTimeout(() => row.classList.remove("snap-back"), 250);
          if (Math.abs(dx) < 6) {
            toggleDone(node, row);
          }
        }
      };
      dot.addEventListener("pointerdown", onPointerDown);
    }

    // ---------- utils ----------
    function swap(el) {
      $view.innerHTML = "";
      $view.appendChild(el);
    }
    function escapeHtml(s) {
      return (s || "").replace(
        /[&<>"']/g,
        m => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[m]
      );
    }
    function escapeAttr(s) {
      return escapeHtml(s).replace(/"/g, "&quot;");
    }
    function trunc(s, n) {
      return s.length > n ? s.slice(0, n - 1) + "…" : s;
    }
    function plural(c) {
      return c === 1 ? "item" : "items";
    }
    function pluralEvent(c) {
      return c === 1 ? "event" : "events";
    }
    function placeCaretEnd(node) {
      node.focus();
      const r = document.createRange();
      r.selectNodeContents(node);
      r.collapse(false);
      const s = window.getSelection();
      s.removeAllRanges();
      s.addRange(r);
    }
    // insert a real newline at the caret (Enter → line break inside a point name)
    function insertNewlineAtCaret() {
      const sel = window.getSelection();
      if (!sel || !sel.rangeCount) return;
      const range = sel.getRangeAt(0);
      range.deleteContents();
      const tn = document.createTextNode("\n");
      range.insertNode(tn);
      range.setStartAfter(tn);
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
    }

    // ---------- theme toggle ----------
    document.getElementById("themeBtn").onclick = () => {
      const cur = document.documentElement.getAttribute("data-theme");
      const isDark = cur ? cur === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
      document.documentElement.setAttribute("data-theme", isDark ? "light" : "dark");
    };

    // keep the real-time "now" line placed correctly when the window resizes
    let resizeT = null;
    window.addEventListener("resize", () => {
      if (!nowCtx) return;
      clearTimeout(resizeT);
      resizeT = setTimeout(() => {
        if (nowCtx && document.contains(nowCtx.spine)) positionNowLine(nowCtx.spine, nowCtx.n);
      }, 150);
    });

    // ---------- auth UI ----------
    const $slot = document.getElementById("authSlot");
    let $open = null; // currently open popover element

    function closePop() {
      if ($open) {
        $open.remove();
        $open = null;
        document.removeEventListener("click", outside, true);
      }
    }
    function outside(e) {
      if ($open && !$open.contains(e.target) && !$slot.contains(e.target)) closePop();
    }
    function popAnchor(el) {
      closePop();
      $open = el;
      $slot.appendChild(el);
      setTimeout(() => document.addEventListener("click", outside, true), 0);
    }

    function updateAuthUI() {
      $slot.innerHTML = "";
      if (auth.user) {
        const wrap = document.createElement("div");
        wrap.className = "user-wrap";
        const btn = document.createElement("button");
        btn.className = "avatar-btn";
        const initial = (auth.user.name || auth.user.email || "?").trim().charAt(0).toUpperCase();
        btn.innerHTML =
          `<span class="sync-dot" id="syncDot" title="Saving…"></span>` +
          (auth.user.picture
            ? `<img src="${escapeAttr(auth.user.picture)}" alt="" referrerpolicy="no-referrer" />`
            : `<span class="avatar-fallback">${escapeHtml(initial)}</span>`) +
          `<span class="who">${escapeHtml(auth.user.name || auth.user.email)}</span>`;
        btn.onclick = e => {
          e.stopPropagation();
          if ($open) {
            closePop();
            return;
          }
          const pop = document.createElement("div");
          pop.className = "pop";
          pop.innerHTML = `<div class="email">${escapeHtml(auth.user.email)}</div>`;
          const out = document.createElement("button");
          out.textContent = "Sign out";
          out.onclick = doLogout;
          pop.appendChild(out);
          popAnchor(pop);
        };
        wrap.appendChild(btn);
        $slot.appendChild(wrap);
      } else if (auth.clientId) {
        const wrap = document.createElement("div");
        wrap.className = "user-wrap";
        const btn = document.createElement("button");
        btn.className = "auth-btn";
        btn.textContent = "Sign in";
        btn.onclick = e => {
          e.stopPropagation();
          if ($open) {
            closePop();
            return;
          }
          openLoginPanel();
        };
        wrap.appendChild(btn);
        $slot.appendChild(wrap);
      }
      // if no clientId (backend not configured yet) → no auth control, app stays local-only
    }

    // GSI loads async — wait for it before touching google.accounts
    function googleReady() {
      return !!(window.google && google.accounts && google.accounts.id);
    }
    function whenGoogleReady(cb) {
      if (googleReady()) return cb();
      let n = 0;
      const t = setInterval(() => {
        if (googleReady()) {
          clearInterval(t);
          cb();
        } else if (++n > 50) clearInterval(t);
      }, 100);
    }
    function ensureGoogleInit() {
      if (!auth.clientId) return;
      whenGoogleReady(() => google.accounts.id.initialize({ client_id: auth.clientId, callback: onGoogleCredential }));
    }

    function openLoginPanel() {
      const panel = document.createElement("div");
      panel.className = "gpanel";
      panel.innerHTML = `<div class="ghint">Sign in with Google to keep your notes synced across devices.</div>
      <div class="gbtn-holder" id="gbtn"></div>`;
      popAnchor(panel);
      const holder = panel.querySelector("#gbtn");
      holder.textContent = "Loading…";
      whenGoogleReady(() => {
        if (!googleReady()) {
          holder.textContent = "Google sign-in unavailable.";
          return;
        }
        holder.textContent = "";
        try {
          google.accounts.id.renderButton(holder, {
            theme: "outline",
            size: "large",
            shape: "pill",
            text: "signin_with",
            logo_alignment: "center",
          });
          google.accounts.id.prompt();
        } catch (e) {
          holder.textContent = "Google sign-in unavailable.";
        }
      });
    }

    function onGoogleCredential(resp) {
      api("POST", "/auth/google", { credential: resp.credential })
        .then(r => {
          closePop();
          onLoggedIn(r.user, true);
        })
        .catch(() => alert("Could not sign in. Please try again."));
    }

    async function onLoggedIn(user, justLoggedIn) {
      auth.user = user;
      try {
        const server = await api("GET", "/notes");
        if (server.notes && server.notes.length) {
          migrateReverseTimes(server.notes);
          migrateAutoNums(server.notes);
          migrateNodeDetails(server.notes);
          db = { notes: server.notes }; // adopt cloud copy
        } else if (justLoggedIn && db.notes && db.notes.length) {
          await api("PUT", "/notes", { notes: db.notes }); // migrate guest notes up
        } else {
          db = { notes: db.notes || [] };
        }
        localStorage.setItem(STORE, JSON.stringify(db));
      } catch (e) {}
      updateAuthUI();
      go("home");
    }

    async function doLogout() {
      try {
        await api("POST", "/logout");
      } catch (e) {}
      auth.user = null;
      closePop();
      updateAuthUI();
      go("home");
    }

    // expose the GSI callback globally so google can reach it
    window.onGoogleCredential = onGoogleCredential;

    async function openSharedFromUrl() {
      const tok = new URLSearchParams(location.search).get("s");
      if (!tok) return false;
      try {
        const r = await api("GET", "/shared/" + encodeURIComponent(tok));
        if (r && r.note) {
          sharedNote = r.note;
          route = { name: "shared" };
          render();
          return true;
        }
      } catch (e) {
        /* not found / offline → fall back to normal */
      }
      return false;
    }

    async function boot() {
      const shared = await openSharedFromUrl();
      if (!shared) render(); // instant local render (guest / cached)
      try {
        const cfg = await api("GET", "/config");
        auth.clientId = cfg.googleClientId || "";
        ensureGoogleInit();
        try {
          const me = await api("GET", "/me");
          if (me && me.user && !shared) {
            await onLoggedIn(me.user, false);
          } else if (me && me.user) {
            auth.user = me.user;
          }
        } catch (e) {
          /* 401 → guest */
        }
      } catch (e) {
        /* backend unreachable → local-only mode */
      }
      updateAuthUI();
    }

    boot();
  })();
</script>