/* --- The colour of a comment -------------------------------------------------------------------
   Comments are orange, everywhere, whatever prototype they are on. They used to take the
   prototype's own accent, which made a comment on Search sidebar blue and the same comment on
   Complex Search purple — so the one thing on the page that is NOT part of the prototype wore the
   prototype's colour. Orange is the feature's, and it is the orange the bar's unread dot already
   uses, so the dot and the markers it is counting are the same thing to look at.
   Declared on :root as a variable rather than written out, because the cursor is built in script
   (comment-mode.js) from the same value and the two must not drift. */
:root { --proto-comment-accent: #f76707; }

/* Prototype comments — comment-mode cursor, on-page markers, and the popup/thread cards.
   Pairs with shared/comments.js (data) and shared/comment-mode.js (interaction). The pill's
   own comment-icon circle + its hover "recent comments" panel are styled in shared/proto-pill.css
   — this file is everything that shows
   up ON THE PAGE while comment mode is active, common to every prototype. */

/* Speech-bubble cursor while comment mode is on — the same bubble as the pill's comment icon and
   the on-page markers, white-filled with an accent-coloured outline, positioned so the bubble's
   TAIL TIP is the hotspot: the tip marks exactly where the comment will be anchored, with the
   bubble body floating up and to the right of it.
   The image is built in JS (shared/comment-mode.js) into --proto-comment-cursor, because the
   outline is the comments orange above and a CSS variable can't be interpolated into a
   data: URI from inside CSS. The fallback here keeps a sensible cursor if that hasn't run. */
html.proto-comment-mode,
html.proto-comment-mode * {
  cursor: var(--proto-comment-cursor, crosshair), crosshair !important;
}
/* The bubble cursor should mean "click here to leave a comment", so it's suppressed on everything
   that isn't such a place: the whole pill INCLUDING the tooltips/panels hanging off it, the launcher
   menu it opens, an existing comment's marker (clicking it OPENS that comment rather than starting a
   new one), and the comment cards. All are already ignored by the click handler, so the bubble there
   would promise something clicking won't do.
   Two keywords that DON'T work here, both tried:
     `revert` — cursor is an INHERITED property, so it rolls the cascade back to the inherited value
       (the bubble set on <html>) and silently changes nothing at all.
     `auto`   — resolves per element, which means `text` over any text content: an I-beam over every
       tooltip label and comment body, flickering as the pointer crosses between text and chrome.
   `default` is what "a normal pointer" actually means: one steady arrow over all of it. */
html.proto-comment-mode .proto-pill,
html.proto-comment-mode .proto-pill *,
html.proto-comment-mode .proto-menu,
html.proto-comment-mode .proto-menu *,
html.proto-comment-mode .proto-comment-marker,
html.proto-comment-mode .proto-comment-marker *,
html.proto-comment-mode .proto-comment-popup,
html.proto-comment-mode .proto-comment-popup *,
html.proto-comment-mode .proto-comment-thread,
html.proto-comment-mode .proto-comment-thread * {
  cursor: default !important;
}
/* …with two exceptions, listed after the block above so they win at equal specificity by source
   order. The pill's own circles are deliberately NOT among them: proto-pill.css sets those to
   `default` on purpose — never a hand cursor. */
html.proto-comment-mode .proto-comment-marker,
html.proto-comment-mode .proto-comment-marker *,
html.proto-comment-mode .proto-comment-jump,
html.proto-comment-mode .proto-comment-del,
html.proto-comment-mode .proto-comment-btn,
html.proto-comment-mode .proto-menu-item,
html.proto-comment-mode .proto-menu-close {
  cursor: pointer !important;
}
/* A field you type into is the one place an I-beam is right. */
html.proto-comment-mode .proto-comment-popup textarea,
html.proto-comment-mode .proto-comment-thread textarea,
html.proto-comment-mode .proto-pill input,
html.proto-comment-mode .proto-pill textarea {
  cursor: text !important;
}

/* On-page marker for an existing comment: a small circle (speech-bubble icon) positioned
   absolutely over its anchor element, appended to <body> so it's never clipped by an
   overflow:hidden ancestor. Page-absolute coordinates (JS adds window scroll), not fixed. */
/* Bigger than it was (26px): on a page full of a prototype's own content a small blob reads as
   decoration, and this is the one thing on the page somebody else has left for you. */
.proto-comment-marker {
  position: absolute; z-index: 20000; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  background: var(--proto-comment-accent, #f76707); color: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0; transition: transform 120ms ease;
}
/* What cursor a marker shows is answered once, down with the drag styles — it has to cover being
   in comment mode and being in hand as well, and two rules saying it would drift apart. */
.proto-comment-marker:hover { transform: scale(1.12); }
.proto-comment-marker svg { width: 18px; height: 18px; }
/* A dashed ring, turning. The marker sits still — it is anchored to something, and a thing that
   wanders is a thing you cannot point at — so the movement is all in the ring around it, which
   catches the eye the way a blinking cursor does without the blob itself going anywhere.
   Drawn as a ::before rather than a border on the marker, because a border would turn the bubble
   inside it with the rest of the element. */
.proto-comment-marker::before {
  content: ""; position: absolute; inset: -6px;
  border-radius: 50%; border: 2px dashed var(--proto-comment-accent, #f76707);
  /* Lighter than the blob it rings, so the blob stays the thing you look at. */
  opacity: 0.55;
  animation: proto-comment-marker-spin 9s linear infinite;
  pointer-events: none;
}
@keyframes proto-comment-marker-spin { to { transform: rotate(360deg); } }
/* Asked for no motion: the ring is still there, saying the same thing, just not turning. */
@media (prefers-reduced-motion: reduce) {
  .proto-comment-marker::before { animation: none; }
}
/* While it is being dragged the ring would be turning under the pointer, which says "look here"
   about a thing already in hand. */
.proto-comment-marker.is-dragging::before { animation: none; opacity: 0.3; }
/* A marker with more than one comment (a thread) gets a small count badge. */
.proto-comment-marker-count {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: #fff; color: var(--proto-comment-accent, #f76707);
  font: 700 10px/15px system-ui, sans-serif; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* New-comment popup: opens on the click, in comment mode, on any element that isn't an
   existing marker.
   drop-shadow rather than box-shadow: a filter shadows the element's whole rendered silhouette
   INCLUDING the caret pseudo-elements below, where box-shadow only ever traces the border box and
   would leave the caret unshadowed — a visible break where the tail meets the card. (The blur is
   roughly halved to match, since drop-shadow's radius is a standard deviation.) */
.proto-comment-popup, .proto-comment-thread {
  position: absolute; z-index: 20001; width: 260px; box-sizing: border-box;
  background: light-dark(#ffffff, #2b2a33); color: light-dark(#15141a, #fbfbfe);
  border: 1px solid light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.12));
  border-radius: 16px; filter: drop-shadow(0 6px 15px rgba(0,0,0,0.28)); padding: 12px;
  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The caret: a triangle on the popup's edge whose tip lands exactly on the spot that was clicked.
   Two stacked triangles, not one — the outer is the card's border colour and the inner its
   background, offset 1px so only a border-width rim of the outer shows. The inner also covers the
   card's own 1px edge across the caret's width, so the tail opens into the card rather than being
   fenced off by a line drawn across its mouth.
   --proto-caret-x is set per-popup in JS: the click's distance from the card's clamped left edge,
   so the card can move to stay on screen while the caret stays over the point.
   The stray -1px on every offset is the card's own border: an absolutely positioned element
   resolves its offsets against its containing block's PADDING box, so an un-adjusted -9px would
   sit a pixel inside the border box the caret visually grows out of — and land the tip a pixel
   down-right of the spot it's meant to be pointing at (measured, not assumed). */
.proto-comment-card::before, .proto-comment-card::after {
  content: ""; position: absolute; left: calc(var(--proto-caret-x, 24px) - 1px); width: 0; height: 0;
  margin-left: -9px; border-left: 9px solid transparent; border-right: 9px solid transparent;
}
.proto-comment-card--below::before {
  top: -10px; border-bottom: 9px solid light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.12));
}
.proto-comment-card--below::after {
  top: -9px; border-bottom: 9px solid light-dark(#ffffff, #2b2a33);
}
/* Flipped: the card sits above the point when there's no room below, so the caret points down. */
.proto-comment-card--above::before {
  bottom: -10px; border-top: 9px solid light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.12));
}
.proto-comment-card--above::after {
  bottom: -9px; border-top: 9px solid light-dark(#ffffff, #2b2a33);
}
.proto-comment-popup textarea, .proto-comment-thread textarea {
  width: 100%; box-sizing: border-box; min-height: 60px; resize: vertical; margin: 6px 0 8px;
  padding: 8px 10px; font: inherit; color: inherit;
  background: light-dark(#f5f4f7, rgba(255,255,255,0.06));
  border: 1px solid light-dark(rgba(0,0,0,0.14), rgba(255,255,255,0.14)); border-radius: 10px;
}
.proto-comment-popup textarea:focus, .proto-comment-thread textarea:focus {
  outline: none; border-color: var(--proto-comment-accent, #f76707);
}
.proto-comment-actions { display: flex; justify-content: flex-end; gap: 8px; }
.proto-comment-btn {
  border: none; border-radius: 999px; padding: 6px 14px; font: 600 12.5px inherit; cursor: pointer;
}
.proto-comment-btn-primary { background: var(--proto-comment-accent, #f76707); color: #fff; }
.proto-comment-btn-primary:hover { filter: brightness(0.93); }
.proto-comment-btn-secondary {
  background: transparent; color: light-dark(#5b5b66, #cfcfd8);
}
.proto-comment-btn-secondary:hover { background: light-dark(rgba(0,0,0,0.06), rgba(255,255,255,0.08)); }

.proto-comment-thread { width: 280px; }
/* The comments scroll, not the whole card — the reply box below stays reachable however long the
   thread gets, and the card keeps a clip-free box for its caret. JS lowers this max-height further
   when even the roomier side of the point can't fit the card. */
.proto-comment-thread-scroll { max-height: 260px; overflow-y: auto; }
.proto-comment-row { padding: 8px 0; border-bottom: 1px solid light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.1)); }
.proto-comment-row:last-of-type { border-bottom: none; }
.proto-comment-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.proto-comment-author { font-weight: 600; font-size: 12.5px; }
.proto-comment-time { font-size: 11px; color: light-dark(#5b5b66, #cfcfd8); flex: none; }
.proto-comment-text { white-space: pre-wrap; word-break: break-word; }
/* Delete, on your own comments only (see rowHtml in comment-mode.js). Revealed on hovering the row
   rather than always shown, so a thread reads as text first; kept in the layout either way
   (opacity, not display) so rows don't reflow as the pointer moves down them. */
.proto-comment-del {
  flex: none; width: 22px; height: 22px; margin: -3px -4px -3px 0; padding: 0; border: none;
  background: transparent; border-radius: 50%; color: light-dark(#5b5b66, #cfcfd8); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0;
}
.proto-comment-del svg { width: 13px; height: 13px; }
.proto-comment-row:hover .proto-comment-del,
.proto-comment-del:focus-visible { opacity: 1; }
.proto-comment-del:hover { background: light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.12)); color: light-dark(#c92a2a, #ff8787); }
/* A tombstoned comment — deleted by its author but kept as its replies' anchor. Muted, so it reads
   as an absence rather than as something someone wrote. */
.proto-comment-row--deleted .proto-comment-text { color: light-dark(#8f8f9d, #8f8f9d); }
.proto-comment-reply-label { font-size: 11px; font-weight: 600; color: light-dark(#5b5b66, #cfcfd8);
  text-transform: uppercase; letter-spacing: 0.04em; margin-top: 10px; }

/* --- The comment button in the bar -------------------------------------------------------------
   Added by shared/comment-mode.js as the first thing in the bar's right-hand group. It wears the
   bar's own .nnav-btn, so everything here is only what makes it an icon-only toggle: the size is
   .nnav .nnav-theme's, copied from shared/new-nav.css so the three icon buttons at that end of the bar
   are the same button at the same size rather than three near-misses. */
/* Size, padding and the way it opens are NOT here. shared/new-nav.css styles this button in the
   same rule as the other two at that end of the bar — one rule for all three, which is what makes
   them the same button rather than three near-misses — and a copy of those values here is a second
   answer to a question that already has one. It was a copy, and it bit: once both were written
   from .nnav they had the same specificity, so whichever stylesheet the page happened to load
   second won. On the navigation page that is this one, and it pinned the button shut at 32px so
   the accordion could not open it; on a description page it is the other way round. The order is
   not ours to rely on, so there is only one rule now.
   What stays is the one thing the bar does not say: the button is the box the unread dot is
   positioned against. */
.nnav .nnav-comments { position: relative !important; }
/* On. The prototype's own accent, which is what the markers and the cursor are drawn in, so the
   bar says "comment mode" in the same colour the page does. Instant, like every other state in the
   bar: the button is the only thing changing, but it changes WITH the cursor and the markers. */
.nnav .nnav-comments.is-on { background: var(--proto-comment-accent, #f76707) !important; color: #fff !important; }
.nnav .nnav-comments.is-on:hover { background: var(--proto-comment-accent, #f76707) !important; }
/* Something has been said since this reader last looked. The pill's own dot, the same 8px in the
   same accent with the same 2px ring around it (.proto-pill-comment-ico.has-new::after in
   shared/proto-pill.css) — the ring in the bar's background rather than the page's, because that
   is what it sits on. It is what lifts a purple dot off a near-black bar. */
/* The icon's own box, which is what the dot is pinned to: the button grows when the accordion
   opens and the icon does not. */
.nnav .nnav-comments-ico { position: relative !important; flex: none !important; display: inline-flex !important; }
.nnav .nnav-comments-dot { position: absolute !important; top: -3px !important; right: -3px !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: #f76707 !important; box-shadow: 0 0 0 2px #2e2a3a !important; display: none !important; }
.nnav .nnav-comments.has-new .nnav-comments-dot { display: block !important; }
/* On the filled button the ring would be a hole in it, so the dot loses the ring. It keeps its
   orange: the dot means "something new here" wherever it is, and a dot that changes colour with
   the button's state is saying something about the button rather than about the page. */
.nnav .nnav-comments.is-on .nnav-comments-dot { box-shadow: none !important; }

/* The X that replaces the bubble while commenting, when the pointer is on the button: the word
   says what the page is doing, and the icon says what clicking will do about it. Only on hover —
   with the pointer away the bubble stays, so the bar is not sitting there with a close button in
   it. Instant, both icons together, because one hover is changing both. */
.nnav .nnav-comments .nnav-comments-x { display: none !important; }
.nnav .nnav-comments.is-on:hover .nnav-comments-x,
.nnav .nnav-comments.is-on:focus-visible .nnav-comments-x { display: block !important; }
.nnav .nnav-comments.is-on:hover svg:not(.nnav-comments-x),
.nnav .nnav-comments.is-on:focus-visible svg:not(.nnav-comments-x) { display: none !important; }
/* The unread dot has no business sitting on a close button. */
.nnav .nnav-comments.is-on:hover .nnav-comments-dot,
.nnav .nnav-comments.is-on:focus-visible .nnav-comments-dot { display: none !important; }

/* The bar along the bottom keeps the ordinary arrow in comment mode, as the pill above does: it is
   the extension's own chrome, and its buttons do what they always do — including the one that comes
   back out of comment mode. Its menus, fly-out and tooltip sit on the body rather than inside it,
   so they are named here too. */
html.proto-comment-mode .nnav, html.proto-comment-mode .nnav *,
html.proto-comment-mode .nnav-menu, html.proto-comment-mode .nnav-menu *,
html.proto-comment-mode .nnav-vmenu, html.proto-comment-mode .nnav-vmenu *,
html.proto-comment-mode .nnav-flyout, html.proto-comment-mode .nnav-flyout *,
html.proto-comment-mode .nnav-tip, html.proto-comment-mode .nnav-tip * { cursor: default !important; }
/* …except the things in there you can press, which keep the hand the bar gives them (the note at
   the top of shared/new-nav.css says why the bar has one at all). The block above is about the
   bubble: comment mode must not suggest you can leave a comment on our own chrome. It is not about
   making the bar's buttons look unpressable while it is on. */
/* Each one names its children as well. What you hover on a button is the word or the icon inside
   it, never the few pixels of padding around them — and `.nnav *` above reaches those children
   while a selector naming only the button does not, so without this the hand appears only in the
   gaps. */
html.proto-comment-mode .nnav .nnav-btn, html.proto-comment-mode .nnav .nnav-btn *,
html.proto-comment-mode .nnav-menu .nnav-item, html.proto-comment-mode .nnav-menu .nnav-item *,
html.proto-comment-mode .nnav-menu .nnav-sort-opt, html.proto-comment-mode .nnav-menu .nnav-sort-opt *,
html.proto-comment-mode .nnav-vmenu .nnav-item, html.proto-comment-mode .nnav-vmenu .nnav-item *,
html.proto-comment-mode .nnav-flyout .nnav-item, html.proto-comment-mode .nnav-flyout .nnav-item *,
html.proto-comment-mode .proto-comment-loose { cursor: pointer !important; }
/* Still not these: they look like controls and are not. */
html.proto-comment-mode .nnav .nnav-staged,
html.proto-comment-mode .nnav-menu .nnav-item--none { cursor: default !important; }

/* Nothing in a comment card scrolls sideways. The thread's list only ever meant to scroll up and
   down, but `overflow-y: auto` with the other axis left at `visible` computes to `auto` there too,
   so anything too wide — a pasted URL, one long unbroken word — put a horizontal scrollbar under
   the comments. The width is fixed by the card, so the text wraps to it instead: `anywhere` breaks
   inside a word when there is nowhere else to break, which is what a URL needs. */
/* The 4px the delete button hangs out by. It is pulled right with a negative margin so the icon
   sits flush with the card's padding rather than inset by its own button box — which put the row,
   and so the list, 4px wider than the box holding it, and THAT was the sideways scroll: the text
   was never the problem. The padding gives that overhang somewhere to land, so the icon stays
   exactly where it looks right and nothing overflows. */
.proto-comment-thread-scroll { overflow-x: hidden; padding-right: 4px; margin-right: -4px; }
.proto-comment-text { overflow-wrap: anywhere; }
/* Same for the name above it, which is an email address and can be long. min-width:0 because it is
   a flex item, and a flex item will not shrink below its content without it. */
.proto-comment-author { min-width: 0; overflow-wrap: anywhere; }

/* The time sits at the right end of the row, and the delete button takes its place when the
   pointer is on that row: one slot, two things, rather than the trash arriving beside the time and
   shoving it along. Absolutely positioned, so it is out of the row's width entirely — which is
   also what stops it widening the row (see the list's padding above). The time is hidden rather
   than removed so nothing shifts as the pointer moves down the thread. */
.proto-comment-row-head { position: relative; }
.proto-comment-author { flex: 1 1 auto; }
.proto-comment-time { margin-left: auto; }
.proto-comment-row:hover .proto-comment-time { visibility: hidden; }
.proto-comment-del { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); margin: 0; }

/* --- "Install the extension" --------------------------------------------------------------------
   Comments need the extension. On the published site a reader without it has no bar, so no comment
   button and no markers — but the C shortcut is still bound, and pressing it used to put them
   silently into a comment mode with nothing in it. It raises this instead.

   Deliberately the same object as the shortcut tooltip that pops out of the bar's X
   (.nnav-tip in shared/new-nav.css): same corner, same 8px clearance, same padding, radius,
   colours, border, shadow and type. These are a copy of that rule's declarations rather than a
   shared class because new-nav.css is the BAR's stylesheet and is not loaded on a page with no
   bar — which is precisely the page this appears on. If the tip's look changes, change it here
   too; nav-test gate 21 fails if the two drift apart.

   Three deliberate differences, all forced by what this one is. nav-test knows about them: the
   properties it compares are the ones that make the two the same object to look at — padding,
   radius, colours, border, shadow, type, corner and clearance — not how each lays its own
   contents out.
     · it is a line of prose, not a row of parts. The tip is a flex row because it sets two
       keycaps beside a label; this is one sentence with a link in it, and flex would put a gap
       inside the sentence.
     · it wraps, and is sized to its own text. The tip says two words and can say `nowrap`; this
       would run off a narrow window. `width: max-content` with a cap is what keeps a sentence on
       one line where there is room and wraps it where there is not — without it, a box positioned
       from the right with no width shrinks to its longest word.
     · it takes the pointer as soon as it is up, because the link in it is the point of it. The
       tip only does that once the bar has gone. */
.proto-comment-toast {
  position: fixed; z-index: 2147483001;
  right: 8px; bottom: 8px;
  box-sizing: border-box; display: block;
  width: max-content; max-width: min(340px, calc(100vw - 16px));
  padding: 7px 10px; border-radius: 8px;
  color-scheme: dark;
  background: light-dark(#ffffff, #454152); color: light-dark(#15141a, #fbfbfe);
  border: 1px solid light-dark(#e0e0e6, #5b5b66);
  box-shadow: 0 6px 18px rgba(0,0,0,0.26);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 12px; font-weight: 400; line-height: 1.5;
  /* It is a label, not something to select: an I-beam over it says otherwise. The link inside it
     is the exception, below. */
  cursor: default; user-select: none;
  opacity: 0; pointer-events: none;
  /* A lone element, so it can fade — nothing else changes with it. */
  transition: opacity 180ms ease;
}
.proto-comment-toast.is-on { opacity: 1; pointer-events: auto; }
/* Going of its own accord a few seconds later, rather than because anybody dismissed it: nothing
   prompted it, so it takes its time on the way out instead of blinking off. */
.proto-comment-toast.is-slowfade { transition: opacity 700ms ease; }
@media (prefers-reduced-motion: reduce) { .proto-comment-toast { transition: none; } }
/* A genuine link on a web page, so it keeps the hand cursor that Firefox's own chrome never uses
   (the house rule's stated exception). */
.proto-comment-toast a {
  color: inherit; text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer; user-select: none;
}
.proto-comment-toast a:hover { text-decoration-thickness: 2px; }

/* --- Comments with nothing left to point at ----------------------------------------------------
   A comment is anchored to an element's id, so an update that takes that element out of the page
   leaves the comment with no marker to draw. It is not lost — it is just not reachable by looking,
   which is why the bar's button says how many there are and opens them.

   Side by side in the corner, above the bar. They are not a thread and there is no order to step
   through: they are whatever the last change took the anchors out from under. Enough of them to
   run out of room is a sign something went wrong in the markup rather than in here, so the row
   simply wraps upwards. */
.proto-comment-detached {
  position: fixed !important; right: 16px !important; bottom: 60px !important;
  z-index: 20001 !important;
  display: flex !important; flex-direction: row-reverse !important; flex-wrap: wrap-reverse !important;
  align-items: flex-end !important; justify-content: flex-end !important; gap: 12px !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important; padding: 0 !important;
}
/* In the row rather than placed against a point, so they take their place from it. */
.proto-comment-detached .proto-comment-thread {
  position: static !important; left: auto !important; top: auto !important;
}
/* No caret: there is nothing for it to point at, which is the whole reason these are here. */
.proto-comment-detached .proto-comment-card::before,
.proto-comment-detached .proto-comment-card::after { display: none !important; }
/* However long a thread is, the card stays inside the window: the comments scroll and the reply
   box below them stays reachable. 220px of the viewport covers the card's own padding, its reply
   box and the gap to the bar. */
.proto-comment-detached .proto-comment-thread-scroll {
  max-height: min(260px, calc(100vh - 220px)) !important;
}
/* The half of the bar's comment button that opens them. */
.proto-comment-loose {
  margin-left: 6px !important; padding-left: 7px !important;
  border-left: 1px solid currentColor !important;
  opacity: 0.75 !important; cursor: pointer !important;
}
.proto-comment-loose:hover, .proto-comment-loose:focus-visible { opacity: 1 !important; }

/* --- Moving a comment --------------------------------------------------------------------------
   A marker can be dragged onto something else, which is how a comment that landed in the wrong
   place is put right and the only way back for one whose element has gone. */
/* Written from html.proto-comment-mode, like the two cursor blocks near the top of this file: a
   marker is only ever on screen in comment mode, and those rules are two deep, so a plain
   .proto-comment-marker here would lose to them and the marker would show the page's bubble.
   The children are named too, because what the pointer is actually over is the bubble drawn in
   the middle of the blob.
   The hand that points, not the open hand of `grab`: a marker is a thing to click, which is what
   nearly every hover on one turns out to be, and dragging is the other thing it can do. `grabbing`
   below says so for as long as one is in hand. */
html.proto-comment-mode .proto-comment-marker, html.proto-comment-mode .proto-comment-marker *,
.proto-comment-marker, .proto-comment-marker * { cursor: pointer !important; }
html.proto-comment-mode .proto-comment-marker,
.proto-comment-marker { touch-action: none !important; }
html.proto-comment-mode .proto-comment-marker.is-dragging, html.proto-comment-mode .proto-comment-marker.is-dragging *,
.proto-comment-marker.is-dragging, .proto-comment-marker.is-dragging * {
  cursor: grabbing !important;
}
html.proto-comment-mode .proto-comment-marker.is-dragging,
.proto-comment-marker.is-dragging {
  opacity: 0.85 !important;
  /* Above the card and the bar while it is in hand, and not in the way of the hit test underneath
     it — which is what decides where it is about to land. */
  z-index: 20010 !important; pointer-events: none !important;
}
/* Over nothing it could attach to. Not a refusal — letting go simply puts it back — so it says so
   quietly rather than in red. */
.proto-comment-marker.is-homeless { opacity: 0.45 !important; }
/* What it would land on. The outline is the prototype's own accent, like the markers and the
   cursor, so the whole gesture is one colour. */
.proto-comment-drop {
  outline: 2px dashed var(--proto-comment-accent, #f76707) !important;
  outline-offset: 2px !important;
}
/* The marker a detached comment has no page to sit on, parked in its card instead. Static, so it
   takes its place in the row rather than from the page's coordinates — the drag gives it those. */
.proto-comment-rehome {
  display: flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 0 8px !important; font-size: 12px !important; opacity: 0.8 !important;
}
.proto-comment-rehome .proto-comment-marker--loose {
  position: relative !important; left: auto !important; top: auto !important; flex: none !important;
}
.proto-comment-rehome .proto-comment-marker--loose.is-dragging {
  position: fixed !important;
}