/* Radial Viewport — visuals ported from the Radial app design system. */
:root {
  --bg: #090a0b;
  --bg-2: #121416;
  --bg-3: #1c1f22;
  --bg-hover: #171a1c;
  --btn: #22262a;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --text: rgba(255, 255, 255, 0.9);
  --muted: rgba(255, 255, 255, 0.5);
  --faint: rgba(255, 255, 255, 0.3);
  --accent: #9ab3d5;
  --accent-hover: #88a3c9;
  --on-accent: #14233a;
  --shadow-sm: 0 1.5px 3px rgba(0,0,0,0.05), 0 0 2px rgba(0,0,0,0.1), 0 0 1px rgba(0,0,0,0.1);
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px;
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ruler-size: 18px;
  --guide: #19c3c3;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 13px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ---- Toolbar ---- */
#toolbar {
  flex: 0 0 auto; height: 44px; display: grid;
  grid-template-columns: 1fr auto 1fr;  /* left | centered URL | right */
  align-items: center; gap: 12px; padding: 0 12px;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
}
.tb-left { display: flex; align-items: center; gap: 8px; justify-self: start; }
.tb-center { display: flex; align-items: center; gap: 8px; justify-self: center; }
.tb-right { display: flex; align-items: center; gap: 8px; justify-self: end; }

/* radial.to acquisition link */
.radial-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--muted); text-decoration: none; font-size: 12px;
  padding: 5px 10px; border-radius: var(--r-md); white-space: nowrap;
  border: 1px solid transparent; transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.radial-link:hover { color: var(--text); background: var(--bg-3); border-color: var(--border); }
.radial-link .radial-name { color: var(--accent); }
.radial-link .ext-ic { width: 12px; height: 12px; opacity: 0.7; }
/* Maker's-mark chip: bottom-right corner of the stage (the toolbar spot now
   belongs to the tools). Solid bg so it reads over the dot grid / framed site;
   hidden during captures so it can't end up in a PNG. */
.radial-chip {
  position: absolute; right: 12px; bottom: 12px; z-index: 5;
  background: var(--bg-2); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
body.shooting .radial-chip { visibility: hidden !important; }

.device-switch {
  display: flex; gap: 2px; padding: 3px; align-items: center;
  background: var(--btn); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.dev-btn {
  background: transparent; color: var(--muted); border: 0;
  padding: 5px 8px; cursor: pointer; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
}
.dev-btn svg { width: 15px; height: 15px; display: block; }
.dev-btn:hover { color: var(--text); }
.dev-btn.active { background: rgba(255,255,255,0.1); color: var(--text); }
.lock-btn.is-locked { color: var(--accent); }
.lock-btn.disabled { opacity: 0.25; cursor: default; } /* still hoverable so its tooltip shows; click is a no-op */
.lock-btn svg { width: 14px; height: 14px; display: block; }

.width-input, .height-input {
  width: 46px; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums; text-align: center;
  padding: 0 2px; border-radius: var(--r-sm); cursor: ew-resize;
  touch-action: none;   /* the scrub owns horizontal drags on touch too */
}
.width-input:hover, .height-input:hover,
.width-input:focus, .height-input:focus { background: rgba(255,255,255,0.08); }
.width-input:focus, .height-input:focus { cursor: text; }
.width-input.is-responsive, .height-input.is-responsive { color: var(--faint); }
.dim-x { color: var(--faint); font-size: 11px; }
.device-sep { width: 1px; height: 15px; background: var(--border-strong); margin: 0 4px; align-self: center; }

/* Reload button — matches the app's #navReload: one crisp rotation per click. */
.bn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto;
  background: transparent; color: var(--muted); border: 0;
  border-radius: var(--r-md); cursor: pointer;
}
.bn-btn:hover:not(:disabled):not(.is-off) { background: var(--bg-hover); color: var(--text); }
.bn-btn:disabled, .bn-btn.is-off { opacity: 0.3; cursor: default; } /* .is-off stays hoverable so its tooltip shows */
.bn-btn .ic { width: 15px; height: 15px; display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.bn-btn.spinning .ic { animation: spin 0.55s var(--ease-out); }

/* The wrap IS the field (app's .bn-url pattern): favicon + transparent input. */
.addr-wrap {
  position: relative; display: flex; align-items: center;
  width: min(520px, 48vw); height: 29px; padding: 0 10px;
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-md);
}
.addr-wrap:focus-within { border-color: var(--border-strong); }
.nav-favicon { width: 15px; height: 15px; border-radius: var(--r-xs); object-fit: contain; flex-shrink: 0; margin-right: 8px; }
.addr {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: 12px; padding: 0;
}

/* Address-bar page search: dropdown of discovered pages under the URL field.
   Typing filters; Enter with nothing highlighted still loads the raw text,
   so the bar keeps working as a plain URL field. */
.addr-menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 8500;
  max-height: 320px; overflow-y: auto; overflow-x: hidden; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.am-item {
  display: flex; align-items: center; gap: 8px; width: 100%; max-width: 100%;
  padding: 7px 9px; background: transparent; border: 0; border-radius: var(--r-sm);
  color: rgba(255,255,255,0.6); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
}
.am-item:hover, .am-item.active { background: var(--bg-3); color: var(--text); }
.am-item .page-ic { display: flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.am-item.active .page-ic { color: var(--text); }
/* min-width:0 lets the label actually shrink in flex; long routes ellipsize
   instead of forcing the menu to scroll sideways. */
.am-item .page-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-item .route { color: var(--faint); font-size: 11px; margin-left: auto; flex-shrink: 1; min-width: 0; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Body: pages sidebar + stage ---- */
#main { flex: 1 1 auto; min-height: 0; display: flex; }

/* Pages sidebar — ported from the app's pages pane (row styling, active state). */
#sidebar {
  width: 232px; flex: 0 0 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-2); border-right: 1px solid var(--border);
  padding: 4px 6px 8px;
}
#sidebar[hidden] { display: none; }
.pane-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; font-size: 12px; font-weight: 600; color: var(--muted); flex: 0 0 auto; }
.page-count { color: var(--faint); font-weight: 500; font-variant-numeric: tabular-nums; }
.pane-empty { padding: 10px 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.pane-empty[hidden] { display: none; }
/* Bottom padding ≈30vh: open space after the last row when scrolled to the end. */
#pageList { list-style: none; margin: 0; padding: 0 0 30vh; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#pageList li {
  padding: 7px 10px; border-radius: var(--r-md); cursor: pointer;
  display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 12.5px;
}
#pageList li:hover { background: var(--bg-hover); color: var(--text); }
#pageList li.active { background: var(--bg-3); color: var(--text); font-weight: 520; }
.page-ic { display: flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.page-ic svg { width: 14px; height: 14px; display: block; }
#pageList li.active .page-ic { color: var(--text); }
.page-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageList li .route { color: var(--faint); font-size: 11px; flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pageList li.active .route { color: var(--muted); }
#sidebarBtn.active { background: var(--bg-3); color: var(--text); }

/* Page-metadata cog: revealed on row hover (app's .page-cog pattern); the dim
   route steps aside so the row doesn't crowd. */
.page-cog { background: transparent; border: 0; color: var(--muted); cursor: pointer; opacity: 0; display: flex; align-items: center; padding: 0 2px; flex-shrink: 0; }
.page-cog svg { width: 13px; height: 13px; display: block; }
#pageList li:hover .page-cog { opacity: 1; }
.page-cog:hover { color: var(--text); }
#pageList li:hover .route { display: none; }

/* Page metadata popout — floats to the right of the sidebar, next to its row. */
.page-meta {
  position: fixed; z-index: 8600; width: 330px; max-height: 72vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 10px;
}
.pm-loading { color: var(--muted); font-size: 12px; padding: 8px 6px; }
.pm-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.pm-fav { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.pm-name { flex: 1; min-width: 0; }
.pm-name .t { font-size: 12.5px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-name .p { font-size: 11px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-close { background: transparent; border: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; padding: 3px; border-radius: var(--r-sm); flex-shrink: 0; }
.pm-close:hover { background: var(--bg-hover); color: var(--text); }
.pm-close svg { width: 13px; height: 13px; }
.pm-sec { font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 4px 2px; }
.pm-row { padding: 4px 4px 5px; }
.pm-k { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-bottom: 2px; display: flex; gap: 6px; align-items: baseline; }
.pm-count { font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.pm-count.over { color: #f0616d; }
.pm-val { font-size: 12px; color: var(--text); line-height: 1.45; word-break: break-word; border-radius: var(--r-xs); cursor: copy; padding: 1px 2px; margin: 0 -2px; }
.pm-val:hover { background: var(--bg-hover); }
.pm-val.copied { color: #2bd07a; }
.pm-none { color: var(--faint); font-style: italic; cursor: default; }
.pm-none:hover { background: transparent; }
.pm-warn { color: #f0616d; }
.pm-og-img { width: 100%; max-height: 165px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--border); display: block; margin: 2px 0 4px; background: var(--bg-3); }
body.shooting #pageMeta { visibility: hidden !important; }

/* Sidebar search — matches the app's .side-search. */
.side-search { position: relative; padding: 2px 4px 6px; flex: 0 0 auto; }
.side-search .search-ic { position: absolute; left: 14px; top: calc(50% - 2px); transform: translateY(-50%); color: var(--muted); display: flex; pointer-events: none; }
.side-search .search-ic svg { width: 13px; height: 13px; }
.side-search input {
  width: 100%; background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--r-md);
  color: var(--text); font: inherit; font-size: 12px; padding: 6px 10px 6px 28px; outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.side-search input:focus { border-color: var(--border-strong); background: var(--bg-hover); }
.side-search input::placeholder { color: var(--faint); }

/* Auto slug-groups (drawers) — ported from the app's page-with-subpages/group patterns. */
#pageList li.page-child { padding-left: 32px; }
.pc-caret {
  display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink: 0;
  transition: transform 0.12s; background: transparent; border: 0; cursor: pointer; padding: 2px; border-radius: var(--r-xs);
}
.pc-caret svg { width: 13px; height: 13px; display: block; }
.pc-caret:hover { color: var(--text); background: var(--bg-hover); }
.pc-caret.open { transform: rotate(90deg); }
#pageList li.group-head { color: var(--muted); font-size: 11.5px; font-weight: 600; gap: 6px; margin-top: 4px; }
#pageList li.group-head:hover { background: var(--bg-hover); color: var(--text); }
.group-count { color: var(--faint); font-weight: 500; font-size: 11px; flex-shrink: 0; }

/* ---- Stage + artboard ---- */
#stage {
  position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}
/* Rulers live in an 18px margin around the canvas — pad the stage so the frame
   centers in the remaining area and the full site stays visible beside the rulers. */
#stage.rulers-on { padding: var(--ruler-size) 0 0 var(--ruler-size); }
#frame {
  position: relative; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transform-origin: center center; overflow: hidden;
  /* Never let flexbox shrink the frame to fit the pane — its layout box must stay
     the true logical width so only transform:scale sizes it (else: side padding). */
  flex: 0 0 auto;
  transition: width 0.12s var(--ease-out), height 0.12s var(--ease-out);
}
#frame.dragging { transition: none; }
#frame.fill { box-shadow: none; }
#site { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

#resizeHandle {
  position: absolute; top: 0; width: 14px; z-index: 4; cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
#resizeHandle .grip { width: 4px; height: 48px; border-radius: var(--r-xs); background: var(--border-strong); transition: background 0.12s; }
#resizeHandle:hover .grip, #resizeHandle.dragging .grip { background: var(--accent); }
#resizeHandle.hidden { display: none; }

#widthLabel {
  position: absolute; top: 10px; z-index: 5; transform: translateX(-50%);
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text);
  font-size: 11px; font-variant-numeric: tabular-nums; padding: 2px 8px;
  border-radius: var(--r-sm); pointer-events: none; white-space: nowrap; display: none;
}
#widthLabel.show { display: block; }

.empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; text-align: center; padding: 0 40px; pointer-events: none;
}
.empty.hidden { display: none; }

/* Full-bleed drag mask so the iframe doesn't swallow mouse events mid-drag. */
#stage.dragging::after { content: ""; position: absolute; inset: 0; z-index: 9; cursor: ew-resize; }

/* ---- Tool group (guides / inspect) ---- */
.tool-group {
  display: flex; gap: 2px; padding: 3px; align-items: center;
  background: var(--btn); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}

/* ---- Screenshot: dropdown menu + status toast ---- */
.shot-wrap { position: relative; display: flex; }
#shotBtn { gap: 3px; padding: 5px 6px 5px 8px; }
#shotBtn .chev { width: 8px; height: 8px; opacity: 0.55; }
.shot-menu {
  position: absolute; top: calc(100% + 9px); right: -4px; z-index: 8500;
  min-width: 172px; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.shot-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; padding: 6px 9px; background: transparent; border: 0;
  border-radius: var(--r-sm); color: var(--text); font: inherit; font-size: 12px;
  text-align: left; cursor: pointer;
}
.shot-item:hover { background: var(--bg-hover); }
.shot-sub { font-size: 10.5px; color: var(--faint); }
/* Toast — bottom-center, the classic spot for copied/error notices. */
#shotToast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 9500;
  display: none; align-items: center;
  background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text);
  font-size: 11.5px; font-variant-numeric: tabular-nums; padding: 6px 12px;
  border-radius: var(--r-md); box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  white-space: nowrap; pointer-events: none;
}
#shotToast.show { display: flex; }
#shotToast.ok { color: #2bd07a; }
#shotToast.err { color: #f0616d; }
/* While capturing: hide viewport chrome that overlaps the frame (it would end up
   in the PNG) and freeze input so a stray drag can't corrupt the stitch. */
body.shooting { cursor: progress; }
body.shooting #resizeHandle, body.shooting #guidesLayer,
body.shooting #widthLabel, body.shooting #tooltip { visibility: hidden !important; }
body.shooting #toolbar, body.shooting #main { pointer-events: none; }

/* ---- Comments (copy for AI) ---- */
#commentBtn, #editBtn { position: relative; }
.cm-badge {
  position: absolute; top: -3px; right: -4px; min-width: 14px; height: 14px;
  padding: 0 3px; border-radius: 7px; background: var(--accent); color: var(--on-accent);
  font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.copyai-wrap { display: flex; align-items: center; gap: 2px; }
.copyai-wrap[hidden] { display: none; }
/* Same treatment as the app's Publish button: accent text on a faint accent
   tint with a subtle outline — not a solid fill. */
.copyai-btn {
  background: rgba(154, 179, 213, 0.10); color: var(--accent);
  border: 1px solid rgba(154, 179, 213, 0.22);
  padding: 5px 12px; border-radius: var(--r-md); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 520; white-space: nowrap;
}
.copyai-btn:hover { background: rgba(154, 179, 213, 0.16); color: var(--accent); }
.copyai-clear {
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; padding: 4px; border-radius: var(--r-sm);
}
.copyai-clear:hover { background: var(--bg-hover); color: var(--text); }
.copyai-clear svg { width: 11px; height: 11px; }

/* ---- Visual sitemap ---- */
.pane-head-btn { margin-left: auto; background: transparent; border: 0; color: var(--muted); cursor: pointer; display: flex; align-items: center; padding: 3px; border-radius: var(--r-sm); }
.pane-head-btn:hover { background: var(--bg-hover); color: var(--text); }
.pane-head-btn svg { width: 13px; height: 13px; display: block; }

#sitemapView {
  position: absolute; inset: 0; z-index: 7;
  user-select: none;   /* dragging across node labels must pan, never highlight text */
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.04) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}
#sitemapView[hidden] { display: none; }
.sm-head {
  position: absolute; top: 10px; left: 12px; z-index: 3;
  display: flex; align-items: baseline; gap: 10px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--text);
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.sm-head .sm-hint { font-size: 10.5px; font-weight: 500; color: var(--faint); }
/* flex + margin:auto centers the tree in the canvas when it fits; the auto
   margins collapse to 0 once the content overflows, so panning/scrolling from
   the true origin still works. flex:none so the sized box never shrinks. */
.sm-scroll { position: absolute; inset: 0; overflow: auto; cursor: grab; display: flex; }
.sm-scroll.panning { cursor: grabbing; }
.sm-size { position: relative; margin: auto; flex: none; }
.sm-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.sm-canvas svg { position: absolute; left: 0; top: 0; pointer-events: none; }
.sm-canvas svg path { stroke: rgba(255,255,255,0.16); stroke-width: 1.5; fill: none; }

.sm-node {
  position: absolute; width: 150px; height: 46px; box-sizing: border-box;
  background: var(--bg-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 6px 9px; cursor: pointer; overflow: hidden;
}
.sm-node .t { font-size: 11.5px; font-weight: 550; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-node .p { font-size: 10px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.sm-node:hover { border-color: rgba(255,255,255,0.25); }
.sm-node.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* The page currently on stage: accent dot, top-right. */
.sm-node .sm-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
/* Inferred from child paths — no real page here. */
.sm-node.ghost { border-style: dashed; background: transparent; cursor: default; }
.sm-node.ghost .t { color: var(--muted); }
/* "+N more" expander for very wide sibling groups. */
.sm-node.more { display: flex; align-items: center; justify-content: center; background: transparent; border-style: dashed; color: var(--muted); font-size: 11px; font-weight: 550; }
.sm-node.more:hover { color: var(--text); }

.sm-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: flex; gap: 2px; padding: 3px; align-items: center;
  background: var(--btn); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.sm-zoom button {
  background: transparent; color: var(--muted); border: 0; cursor: pointer;
  border-radius: var(--r-md); font: inherit; font-size: 12px; padding: 4px 8px;
  font-variant-numeric: tabular-nums;
}
.sm-zoom button:hover { color: var(--text); background: rgba(255,255,255,0.08); }
.sm-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 0 40px; pointer-events: none; }
.sm-empty[hidden] { display: none; }   /* display:flex above would defeat the hidden attribute */
body.shooting #sitemapView { visibility: hidden !important; }

/* ---- Rulers + guides overlay ---- */
.guides-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.guide-lines { position: absolute; inset: 0; pointer-events: none; }
.ruler-strip { position: absolute; background: var(--bg-2); pointer-events: auto; overflow: hidden; }
.ruler-top { top: 0; left: var(--ruler-size); right: 0; height: var(--ruler-size); border-bottom: 1px solid var(--border); cursor: row-resize; }
.ruler-left { left: 0; top: var(--ruler-size); bottom: 0; width: var(--ruler-size); border-right: 1px solid var(--border); cursor: col-resize; }
.ruler-corner { position: absolute; top: 0; left: 0; width: var(--ruler-size); height: var(--ruler-size); background: var(--bg-2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ruler-tick { position: absolute; background: var(--faint); }
.ruler-top .ruler-tick { bottom: 0; width: 1px; height: 4px; }
.ruler-top .ruler-tick.major { height: 8px; }
.ruler-left .ruler-tick { right: 0; height: 1px; width: 4px; }
.ruler-left .ruler-tick.major { width: 8px; }
.ruler-label { position: absolute; font-size: 9px; line-height: 1; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ruler-top .ruler-label { top: 2px; transform: translateX(3px); }
.ruler-left .ruler-label { left: 2px; transform: translateY(2px); }
/* Guide lines: 1px colored center inside a wider transparent hit strip. */
.guide-line { position: absolute; pointer-events: auto; }
.guide-line.v { top: 0; bottom: 0; width: 9px; margin-left: -4px; cursor: col-resize; }
.guide-line.h { left: 0; right: 0; height: 9px; margin-top: -4px; cursor: row-resize; }
.guide-line::after { content: ""; position: absolute; background: var(--guide); }
.guide-line.v::after { left: 4px; top: 0; bottom: 0; width: 1px; }
.guide-line.h::after { top: 4px; left: 0; right: 0; height: 1px; }
/* About to be deleted (dragged back into a ruler / off the edge): dim + red. */
.guide-line.removing::after { background: var(--danger, #f0616d); opacity: 0.5; }

/* Tooltips — one body-level #tooltip positioned by JS (ported from the app). */
#tooltip {
  position: fixed; left: 0; top: 0; z-index: 9000; max-width: 280px;
  padding: 5px 10px; background: rgba(20,22,26,0.95); border: 1px solid var(--border);
  border-radius: var(--r-md); font-size: 11.5px; font-weight: 490; color: rgba(255,255,255,0.92);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
#tooltip.show { opacity: 1; }
#tooltip.wrap { white-space: normal; }

/* ---- Demo-page extras (not part of the extension) ---- */
/* Small screens: the full chrome doesn't fit — keep device switch + frame,
   drop the tool cluster and sidebar. */
@media (max-width: 760px) {
  .tb-right, #sidebar, .tb-center { display: none; }
  #toolbar { grid-template-columns: 1fr; }
}