/* html-revisor client styles. The tool draws over the page and never styles it: page elements
   get no classes, and the only rule that reaches them is the copy cursor.
   The server inlines this file into every page it serves; DESIGN.html links it.
   Components are scoped to #hrv-layer, the layer the client script adds, or to .hrv-layer,
   for showing them in a document. :is() keeps the ID's specificity, so page CSS can't win. */

/* One material for every component: near-black surface, 1px light ring, shadow, square corners,
   the same in light and dark mode. Agent-made pages round their corners; ours are square.
   Color means one thing: the accent marks the icon, the crop marks, and the main action. */
:root {
  --hrv-accent: #d6336c;
  --hrv-on-accent: #fff;
  --hrv-error: #ff6b6b;
  --hrv-surface: #18191c;
  --hrv-ring: #fff;
  --hrv-text: #fff;
  --hrv-muted: #a0a3a8;
  --hrv-line: #44474d;
  --hrv-field: #0e0f11;
  --hrv-button: #2c2e33;
  --hrv-button-hover: #3a3d43;
  --hrv-font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  --hrv-mono: 13px/1.4 ui-monospace, Menlo, Consolas, monospace;
  --hrv-material: 0 0 0 1px var(--hrv-ring), 0 4px 16px rgba(0, 0, 0, 0.45);
  --hrv-halo: #fff;
  --hrv-crop-gap: 4px;
  --hrv-halo-filter: drop-shadow(1px 0 0 var(--hrv-halo)) drop-shadow(-1px 0 0 var(--hrv-halo))
    drop-shadow(0 1px 0 var(--hrv-halo)) drop-shadow(0 -1px 0 var(--hrv-halo)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  --hrv-pencil: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><g transform='rotate(40 8 8)'><rect x='0' y='5.6' width='2.6' height='4.8'/><rect x='3.6' y='5.6' width='7.4' height='4.8'/><path d='M12 5.6L16 8l-4 2.4z'/></g></svg>");
}

/* The halo: every mark drawn on the page itself gets a light edge and a dark edge, so it shows on
   any page. --hrv-halo-filter draws it around any shape: four crisp 1px white shadows, then a soft
   dark one. Components in the material carry their own light ring instead. */

/* Clicking an element leaves a directive on it; the cursor says so. Review mode off (the docket)
   sets data-hrv-review="off" on the html element, which turns the cursor off. That attribute is
   the one mark the tool puts on the page, and only this rule reads it. */
html:not([data-hrv-review="off"]) [data-hrv]:not(html, body) { cursor: copy !important; }

/* Reset everything inside the layer so the page's CSS cannot leak in. */
#hrv-layer { all: initial; display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 2147483647; }
:is(#hrv-layer, .hrv-layer) *, :is(#hrv-layer, .hrv-layer) *::before, :is(#hrv-layer, .hrv-layer) *::after {
  all: initial; box-sizing: border-box; margin: 0;
  font: var(--hrv-font); color: var(--hrv-text);
}
:is(#hrv-layer, .hrv-layer) div { display: block; }

/* The html-revisor icon: a magenta pencil, drawn as a mask so it takes the accent.
   It marks everything the tool adds to a page. The tip faces right, toward the element:
   the icon sits on the left. */
:is(#hrv-layer, .hrv-layer) .hrv-icon {
  display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px;
  background: var(--hrv-accent);
  -webkit-mask: var(--hrv-pencil) center / contain no-repeat; mask: var(--hrv-pencil) center / contain no-repeat;
}

/* The marker: the icon on a tile of the material, saying "this element has a directive".
   The client puts it outside the element's box and flush against it, so it reads as that element's
   and not a neighbor's: left of the first line, or above the top-left corner when the left has no
   room. The pencil tip points at the element. It sits over the crop mark at that corner. */
:is(#hrv-layer, .hrv-layer) .hrv-marker {
  position: absolute; width: 20px; height: 20px; padding: 3px;
  background: var(--hrv-surface); box-shadow: var(--hrv-material); cursor: pointer; z-index: 1;
}
:is(#hrv-layer, .hrv-layer) .hrv-marker::before {
  content: ""; display: block; width: 14px; height: 14px; background: var(--hrv-accent);
  -webkit-mask: var(--hrv-pencil) center / contain no-repeat; mask: var(--hrv-pencil) center / contain no-repeat;
}
:is(#hrv-layer, .hrv-layer) .hrv-marker:hover { box-shadow: 0 0 0 1px var(--hrv-accent), 0 4px 16px rgba(0, 0, 0, 0.45); }

/* The marker's tooltip: the directive text, in the material, monospace like the directive field. */
:is(#hrv-layer, .hrv-layer) .hrv-tip {
  position: absolute; width: max-content; max-width: 280px; padding: 6px 8px; background: var(--hrv-surface);
  box-shadow: var(--hrv-material); font: var(--hrv-mono); white-space: pre-wrap; overflow-wrap: anywhere;
  pointer-events: none; z-index: 2;
}

/* Crop marks: four square corners just outside an element. The client sizes .hrv-crop to the
   element's box plus --hrv-crop-gap on each side, so the marks never touch what they mark.
   Thin on hover; heavier, with a hairline outline, while the element's box is open. */
:is(#hrv-layer, .hrv-layer) .hrv-crop {
  --arm: 10px; --w: 2px; --len: min(var(--arm), 30%); --ink: linear-gradient(var(--hrv-accent), var(--hrv-accent));
  position: absolute; display: block; pointer-events: none;
  background:
    var(--ink) left top / var(--len) var(--w), var(--ink) left top / var(--w) var(--len),
    var(--ink) right top / var(--len) var(--w), var(--ink) right top / var(--w) var(--len),
    var(--ink) left bottom / var(--len) var(--w), var(--ink) left bottom / var(--w) var(--len),
    var(--ink) right bottom / var(--len) var(--w), var(--ink) right bottom / var(--w) var(--len);
  background-repeat: no-repeat;
  filter: var(--hrv-halo-filter);
}
:is(#hrv-layer, .hrv-layer) .hrv-crop.hrv-selected {
  --arm: 16px; --w: 3px; --len: min(var(--arm), 30%);
  border: 1px solid var(--hrv-accent); background-origin: border-box;
}

/* The directive box opens beside its element; data-side says which side the box is on.
   The notch, a square of the material turned 45 degrees, sits on the edge facing the element,
   --hrv-notch along that edge, so it points at the element when the box shifts to stay in view.
   Its two outer edges carry the ring; the inner half hides in the box.
   The box sits above markers (1), tips (2), and the docket (1): the box is what you're working in. */
:is(#hrv-layer, .hrv-layer) .hrv-box {
  position: absolute; width: 320px; padding: 8px; background: var(--hrv-surface); color: var(--hrv-text);
  box-shadow: var(--hrv-material); z-index: 3;
  --hrv-notch: 24px; --hrv-notch-size: 12px;
}
:is(#hrv-layer, .hrv-layer) .hrv-box[data-side]::before {
  content: ""; position: absolute; display: block; width: var(--hrv-notch-size); height: var(--hrv-notch-size);
  background: var(--hrv-surface); border: 0 solid var(--hrv-ring); transform: rotate(45deg);
}
:is(#hrv-layer, .hrv-layer) .hrv-box:is([data-side="below"], [data-side="above"])::before { left: calc(var(--hrv-notch) - var(--hrv-notch-size) / 2); }
:is(#hrv-layer, .hrv-layer) .hrv-box:is([data-side="right"], [data-side="left"])::before { top: calc(var(--hrv-notch) - var(--hrv-notch-size) / 2); }
:is(#hrv-layer, .hrv-layer) .hrv-box[data-side="below"]::before { top: calc(var(--hrv-notch-size) / -2); border-top-width: 1px; border-left-width: 1px; }
:is(#hrv-layer, .hrv-layer) .hrv-box[data-side="above"]::before { bottom: calc(var(--hrv-notch-size) / -2); border-bottom-width: 1px; border-right-width: 1px; }
:is(#hrv-layer, .hrv-layer) .hrv-box[data-side="right"]::before { left: calc(var(--hrv-notch-size) / -2); border-bottom-width: 1px; border-left-width: 1px; }
:is(#hrv-layer, .hrv-layer) .hrv-box[data-side="left"]::before { right: calc(var(--hrv-notch-size) / -2); border-top-width: 1px; border-right-width: 1px; }
/* The header names the element: the icon, the tag, the start of its text. */
:is(#hrv-layer, .hrv-layer) .hrv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
:is(#hrv-layer, .hrv-layer) .hrv-what { display: block; flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Fields grow with their text (the client sets the height) up to max-height, then scroll. */
:is(#hrv-layer, .hrv-layer) .hrv-box textarea {
  display: block; width: 100%; height: 56px; min-height: 56px; max-height: 240px; padding: 6px;
  border: 1px solid var(--hrv-line); background: var(--hrv-field); color: var(--hrv-text);
  resize: none; overflow: auto; white-space: pre-wrap; cursor: text;
}
/* The directive is an instruction headed into an HTML comment: monospace. */
:is(#hrv-layer, .hrv-layer) .hrv-box textarea.hrv-directive { font: var(--hrv-mono); }
/* The Text field holds the element's markdown, syntax and all: monospace too. */
:is(#hrv-layer, .hrv-layer) .hrv-box textarea.hrv-text { font: var(--hrv-mono); height: 32px; min-height: 32px; }
:is(#hrv-layer, .hrv-layer) .hrv-box textarea::placeholder { color: var(--hrv-muted); }
:is(#hrv-layer, .hrv-layer) .hrv-label { display: block; margin: 6px 0 2px; color: var(--hrv-muted); }
:is(#hrv-layer, .hrv-layer) .hrv-label:first-child { margin-top: 0; }
:is(#hrv-layer, .hrv-layer) .hrv-box textarea:focus { outline: 1px solid var(--hrv-accent); outline-offset: -1px; border-color: var(--hrv-accent); }
:is(#hrv-layer, .hrv-layer) .hrv-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
:is(#hrv-layer, .hrv-layer) .hrv-hint { flex: 1; color: var(--hrv-muted); }
/* The save status takes the hint's place: "saving…", "saved", "not saved". */
:is(#hrv-layer, .hrv-layer) .hrv-hint.hrv-status { color: var(--hrv-text); }
:is(#hrv-layer, .hrv-layer) .hrv-btn {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--hrv-line);
  background: var(--hrv-button); color: var(--hrv-text); text-align: center; cursor: pointer;
}
:is(#hrv-layer, .hrv-layer) .hrv-btn:hover { background: var(--hrv-button-hover); }
:is(#hrv-layer, .hrv-layer) .hrv-done { background: var(--hrv-accent); border-color: var(--hrv-accent); color: var(--hrv-on-accent); }
:is(#hrv-layer, .hrv-layer) .hrv-done:hover { border-color: var(--hrv-ring); }
/* Delete is a text button: it destroys, so it doesn't draw the eye. */
:is(#hrv-layer, .hrv-layer) .hrv-btn.hrv-quiet { padding: 4px 6px; border-color: transparent; background: none; color: var(--hrv-muted); }
:is(#hrv-layer, .hrv-layer) .hrv-btn.hrv-quiet:hover { color: var(--hrv-text); text-decoration: underline; }

/* The docket: bottom right of the window. Icon and count switch review mode; the arrows step through
   the directives. A save error or the stale-file warning sits on top, in the error color. */
:is(#hrv-layer, .hrv-layer) .hrv-docket {
  position: fixed; right: 16px; bottom: 16px; z-index: 1; display: flex; flex-wrap: wrap; max-width: 360px;
  background: var(--hrv-surface); box-shadow: var(--hrv-material);
}
:is(#hrv-layer, .hrv-layer) .hrv-docket-msg { display: none; flex: 1 0 100%; padding: 6px 10px; border-bottom: 1px solid var(--hrv-line); color: var(--hrv-error); }
:is(#hrv-layer, .hrv-layer) .hrv-docket-main { display: flex; flex: 1; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
:is(#hrv-layer, .hrv-layer) .hrv-step {
  display: flex; align-items: center; justify-content: center; width: 28px; border-left: 1px solid var(--hrv-line);
  cursor: pointer; user-select: none;
}
:is(#hrv-layer, .hrv-layer) :is(.hrv-docket-main, .hrv-step):hover { background: var(--hrv-button-hover); }
:is(#hrv-layer, .hrv-layer) .hrv-docket.hrv-none .hrv-step { display: none; }
:is(#hrv-layer, .hrv-layer) .hrv-docket.hrv-none .hrv-docket-main { color: var(--hrv-muted); }
:is(#hrv-layer, .hrv-layer) .hrv-docket.hrv-off .hrv-docket-main { color: var(--hrv-muted); }
:is(#hrv-layer, .hrv-layer) .hrv-docket.hrv-off .hrv-icon { background: var(--hrv-muted); }
:is(#hrv-layer, .hrv-layer) .hrv-docket.hrv-error { box-shadow: 0 0 0 1px var(--hrv-error), 0 4px 16px rgba(0, 0, 0, 0.45); }
:is(#hrv-layer, .hrv-layer) .hrv-docket.hrv-error .hrv-docket-msg { display: block; }

/* Review mode off: the markers go too. */
:is(#hrv-layer, .hrv-layer).hrv-reading .hrv-marker { display: none !important; }