/* Notes on the scene — cycle 41, design-12.
 *
 * NOT BUNDLED, like room.css: the export has no service, so it has no notes (tools/bundle.py).
 *
 * THE VOCABULARY IS DELIBERATELY NOT THE SLOTS'. design-03 §6.1's sentence, arriving a second time:
 * conflating two vocabularies would make one thing look like another. A slot is light on the
 * object, in gold, and may pulse; a note is a paper tag on a pin, never gold, never pulsing — gold
 * would make a comment look like heritage (design-12 §2.2).
 */

:root {
  --note-paper: var(--print-paper);
  --note-edge: color-mix(in srgb, var(--ink) 38%, transparent);
  --note-head: var(--tile-pink);
  --note-marker: 56px;
}

/* ── the switch ───────────────────────────────────────────────────────────────────────────── */

/* IN THE CHROME, UNDER THE SCENE'S NAME, THE SIZE OF SCENE | LIST — cycle 41, review round 1.
 *
 * design-12 §3.3 floated it top-centre over the picture at 56px, and the human, having used it: *"too
 * huge, please make it smaller (similar to the 'scene and list' size), and put at the bottom of the
 * scene title."* So it wears the view toggle's own proportions and voice — 34px, mono, a pressed half
 * in canvas — and sits in the row that said where you came from. A control that changes what the
 * screen shows belongs with the other one that does. */
.notes-switch {
  display: inline-flex;
  margin-top: 5px;
  border: 1px solid rgba(246,239,225,.4);
  border-radius: 999px;
  overflow: hidden;
}
.notes-switch[hidden] { display: none; }

.notes-switch button {
  min-width: var(--tap-min);
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  background: rgba(31,44,38,.35);
  color: var(--canvas);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.notes-switch button[aria-pressed="true"] {
  background: var(--canvas);
  color: var(--ink);
}

/* The switch is about the picture; the list carries notes in words (design-01 §9). */
body[data-view="list"] .notes-switch,
body[data-view="list"] .notes-more { display: none; }

/* +N MORE, AND THE EMPTY LINE — at the bottom now, between the room's corner and the pin button, since
 * the top-centre band they sat under went with the floating switch. */
.notes-more,
.notes-empty {
  position: absolute;
  left: 50%;
  bottom: calc(var(--foot-bar-h, 58px) + 22px);
  transform: translateX(-50%);
  z-index: 35;
  max-width: calc(100% - 180px);
}

.notes-more {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: color-mix(in srgb, var(--canvas) 92%, transparent);
  color: var(--ink);
  font: 500 13px/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
}

/* THE EMPTY LINE, AS CHROME — design-12 §6: the picture and one authored sentence, never a
 * placeholder pin. */
.notes-empty {
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--canvas) 90%, transparent);
  color: var(--ink);
  font: 500 13px/1.35 var(--font-body);
  text-align: center;
  pointer-events: none;
}

/* ── Notes mode ───────────────────────────────────────────────────────────────────────────── */

/* THE PICTURE LOOKS EXACTLY AS IT DOES IN EXPLORE — cycle 41, review round 1: *"under notes mode, do
 * not need to put a layer of greyish, just normal as explore mode."* The first build lowered the
 * stage's contrast to say *the drawing has stepped back*; the notes on it say that already. */

/* THE SLOTS, THEIR DOTS, THE PEOPLE AND THE SIGNS GO QUIET — design-12 §3.2. Drawn and dimmed, not
 * hidden: the picture still says what is there, it just does not answer a tap. That is what lets a
 * note pinned on a door never compete with the door. */
/* THEY DO NOT ANSWER A TAP, AND THEY LOOK THE SAME. Silenced rather than dimmed since review round 1,
 * so a note pinned on a door never competes with the door — and nothing about the picture changes. */
body[data-notes="on"] .marker-layer :is(.region, .signage, .memory-figure, .viewer-figure) {
  pointer-events: none !important;
}

body:not([data-notes="on"]) .note-pin { display: none; }
body[data-notes="on"] .add-memory { display: none; }
body:not([data-notes="on"]) .add-note { display: none; }

/* ── a pin ─────────────────────────────────────────────────────────────────────────────────── */

/* A SLOT'S MARKER IN EVERY RESPECT THE CAMERA CARES ABOUT: absolute in the marker layer, moved by
 * `--pan` exactly as `.region` is (docs/plan/pin-probe.md check d). Unlike a region it keeps its
 * size when the picture is framed — `--unzoom` — because it is a thing to read, like a panel. The
 * anchor is its point: the tag hangs from the pin head, centred on it. */
.note-pin {
  position: absolute;
  width: var(--note-marker);
  height: var(--note-marker);
  margin: calc(var(--note-marker) / -2) 0 0 calc(var(--note-marker) / -2);
  transform: translateX(var(--pan, 0px)) scale(var(--unzoom, 1));
  transform-origin: 50% 50%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 20;
  filter: drop-shadow(0 4px 6px rgba(31, 44, 38, .32));
}

.note-pin-glyph { width: 100%; height: 100%; display: block; }
/* A HEAVIER EDGE since review round 2 — *"increase the border a little to make it easier to spot"*: a
 * near-white tag on a limewash facade had almost no outline to find. */
.note-pin-paper { fill: var(--note-paper); stroke: color-mix(in srgb, var(--ink) 78%, transparent); stroke-width: 2.6; }
.note-pin-fold { fill: color-mix(in srgb, var(--ink) 12%, var(--note-paper)); }
.note-pin-head { fill: var(--note-head); stroke: var(--ink); stroke-width: 1.2; }

.note-pin-count {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--ink);
  color: var(--canvas);
  font: 700 13px/22px var(--font-body);
}

/* The group that is open steps aside for its numbered dots — A GROUP, and only a group. A single note has
 * no dots to step aside for, and hiding its tag left the picture saying nothing about where the note you
 * are reading is (the human, 2026-09-14: *"when a single note open for reading, please show the note
 * icon"*). It stays, and stops answering a tap, because its card is already open. */
.note-pin.is-open { pointer-events: none; }
.note-pin.is-open:not([data-count="1"]) { opacity: 0; }

/* THE NOTE BEING WRITTEN — placed, confirmed, and framed while its words are typed. A tag that rides the
 * picture like any other, so the camera can frame it; not a group, so nothing counts it or opens it. */
.note-pin-placed { pointer-events: none; z-index: 21; }

/* While a pin is being dragged near a group, that group lifts — *joins N notes here*. */
.note-pin.joins { transform: translateX(var(--pan, 0px)) scale(calc(var(--unzoom, 1) * 1.18)); }

/* ── placing one ──────────────────────────────────────────────────────────────────────────── */

.note-placing {
  position: absolute;
  width: var(--note-marker);
  height: var(--note-marker);
  margin: calc(var(--note-marker) / -2) 0 0 calc(var(--note-marker) / -2);
  z-index: 42;
  touch-action: none;
  cursor: grab;
  filter: drop-shadow(0 8px 10px rgba(31, 44, 38, .38));
}
.note-placing[data-dragging="true"] { cursor: grabbing; }
.note-placing:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; border-radius: 50%; }

.note-placing-joins {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  white-space: nowrap;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--canvas);
  font: 600 12px/1.2 var(--font-body);
}

/* THE PIN BUTTON — the lens's corner, and filled, because in Notes mode it is the one thing to do. */
.add-note {
  position: absolute;
  right: 14px;
  bottom: calc(var(--foot-bar-h, 58px) + 14px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--ink);
  box-shadow: 0 6px 18px rgba(31, 44, 38, .32);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 44;
}

/* A plus, drawn — and a cross while pinning, as the lens is while placing a memory. */
.add-note-glyph { position: relative; width: 22px; height: 22px; }
.add-note-glyph::before,
.add-note-glyph::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 3px;
  margin: -1.5px 0 0 -11px;
  border-radius: 2px;
  background: var(--canvas);
  transition: transform .2s ease;
}
.add-note-glyph::after { transform: rotate(90deg); }
body[data-pinning="true"] .add-note-glyph::before { transform: rotate(45deg); }
body[data-pinning="true"] .add-note-glyph::after { transform: rotate(-45deg); }

.note-confirm {
  position: absolute;
  right: 20px;
  bottom: calc(var(--foot-bar-h, 58px) + 14px + 56px + 10px);
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  background: var(--gold);
  box-shadow: 0 6px 18px rgba(31, 44, 38, .22);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 44;
}

/* NOTHING ELSE ANSWERS WHILE A NOTE IS BEING PLACED — design-12 §5.1.1. Dimmed rather than hidden,
 * so nothing jumps when pinning ends. The pin button (now the cross) and the tick stay live. */
body[data-pinning="true"] :is(.chrome, .foot-bar, .room-bubble-host, .companion-host,
                              .notes-more, .sign-in) {
  pointer-events: none !important;
  opacity: .4;
}
/* AND EVERYTHING INSIDE THEM, which is the half the first build missed and the test found: app.css
 * gives `.chrome > *` and the foot bar's buttons `pointer-events: auto`, and a child's own `auto`
 * beats a parent's `none`. So the minimap opened the map with a note half-placed. */
body[data-pinning="true"] :is(.chrome, .foot-bar, .room-bubble-host, .companion-host,
                              .notes-more, .sign-in) * {
  pointer-events: none !important;
}
body[data-pinning="true"] .marker-layer .note-pin { pointer-events: none; }

/* ── the form ─────────────────────────────────────────────────────────────────────────────── */

.note-form-host {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(var(--foot-bar-h, 58px) + 10px);
  z-index: 46;
}

.note-form {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  background: var(--canvas);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  box-shadow: 0 14px 34px rgba(31, 44, 38, .3);
  color: var(--ink);
}

.note-form-head { margin: 0; font: 600 16px/1.2 var(--font-display); }

.note-form-body {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 84px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: var(--print-paper);
  color: var(--ink);
  font: 400 16px/1.4 var(--font-body);
}

.note-form-left { justify-self: end; font: 500 12px/1 var(--font-mono, monospace); opacity: .7; }

.note-form-lasts { display: flex; gap: 6px; }
.note-form-last {
  flex: 1;
  min-height: var(--tap-min);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: transparent;
  color: var(--ink);
  font: 500 14px/1 var(--font-body);
  cursor: pointer;
}
.note-form-last[aria-checked="true"] { background: var(--ink); color: var(--canvas); border-color: var(--ink); }

.note-form-disclose { margin: 0; font: 400 13px/1.4 var(--font-body); }
.note-form-refusal { margin: 0; font: 600 13px/1.35 var(--font-body); color: var(--clay); }

.note-form-actions { display: flex; gap: 8px; justify-content: flex-end; }
.note-form-cancel,
.note-form-send {
  min-height: var(--tap-min);
  padding: 0 18px;
  border-radius: 999px;
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
}
.note-form-cancel { border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: transparent; color: var(--ink); }
.note-form-send { border: 0; background: var(--ink); color: var(--canvas); }

/* ── a note, open ─────────────────────────────────────────────────────────────────────────── */

.detail-note-when,
.anchored .detail-note-when {
  display: block;
  margin-top: 6px;
  font: 500 12px/1.3 var(--font-mono, monospace);
  opacity: .72;
}

/* THE WORDS AND THE FLAG ON ONE ROW — the flag slice's review: a small flag at the right of the
   message rather than a worded button under it. The words take the row; the flag keeps its size. */
.note-said { display: flex; align-items: flex-start; gap: 6px; }
.note-said > .panel-body,
.note-said > .detail-text { flex: 1; min-width: 0; }

/* A NOTE IN A GROUP READS LIKE A NOTE ALONE — the same size of words as `.panel-body`, not the 11.5px a
   caption card's second line gets under its bold label. */
.detail-card[data-pin] .detail-text { font-size: 12.5px; line-height: 1.45; margin-top: 0; }
.detail-card[data-pin] .detail-by { margin-top: 6px; }

/* The room's flag, drawn at the card's register: quiet until it is looked at, and a tap target larger
   than the icon it draws. */
.note-flag {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -5px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  cursor: pointer;
}
.note-flag svg { display: block; }
.note-flag:hover,
.note-flag:focus-visible { color: var(--clay); }

.note-take-down {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  font: 600 12px/1 var(--font-body);
  cursor: pointer;
}

/* The flag's one line — on the card, because the notice strip fades while a card is framed. */
.note-flag-said {
  margin: 6px 0 0;
  font: 500 12px/1.35 var(--font-mono, monospace);
  opacity: .8;
}
.note-flag-said[data-failure="true"] { color: var(--clay); opacity: 1; }

/* ── the list ─────────────────────────────────────────────────────────────────────────────── */

.list-notes { margin-top: 18px; }
.list-notes-heading { font: 600 13px/1 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .06em; opacity: .75; margin-bottom: 8px; }
.list-note { padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.list-note-who { font-weight: 600; }
.list-note-body { margin: 4px 0; }
.list-note-when,
.list-note-where { display: block; font: 500 12px/1.35 var(--font-mono, monospace); opacity: .72; }
.list-note-pin { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.list-note-pin select,
.list-note-pin button { min-height: var(--tap-min); font: 500 14px/1 var(--font-body); }

/* ── when something covers the picture ────────────────────────────────────────────────────── */

/* THE SWITCH, THE PIN BUTTON AND THE TICK ARE SCENE OVERLAYS, so they go when the scene does —
 * the rule `.companion-host` and `.room-bubble-host` already follow in app.css, for the same
 * reason: a control about the street floating over the map, the record, the tray, the room or the
 * list is a control about somewhere the person is not looking. Found at build: the first look put
 * the pin button over the record's own add button. */
.frame:has(#map:not([hidden])) :is(.notes-switch, .notes-more, .notes-empty, .add-note, .note-confirm),
.frame:has(#timelapse:not([hidden])) :is(.notes-switch, .notes-more, .notes-empty, .add-note, .note-confirm),
.frame:has(#tray:not([hidden])) :is(.notes-switch, .notes-more, .notes-empty, .add-note, .note-confirm),
.frame:has(#room:not([hidden])) :is(.notes-switch, .notes-more, .notes-empty, .add-note, .note-confirm),
.frame:has(#list:not([hidden])) :is(.notes-empty, .add-note, .note-confirm),
body[data-ask="true"] :is(.notes-switch, .notes-more, .notes-empty, .add-note, .note-confirm) {
  display: none !important;
}

/* The sign-in line is about PHOTOGRAPHS — the lens's corner's job — and the lens is not here in
 * Notes mode. A guest may pin a note without an account (design-12 §7), so an invitation to sign in
 * over this mode would be asking for something nothing in it needs. */
body[data-notes="on"] .sign-in { display: none; }

/* ── a comment goes on Notes — the slice `a-comment-is-a-note` ───────────────────────────────────
   Under whatever the card already offers, set apart by a rule so it reads as a second door rather
   than as part of the form above it. The button is the card's size of button, not a link: it does
   something (it puts a pin out), and a person looking for where their comment went should see it. */
.content-notes {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
}
.content-notes-lede { margin: 0 0 7px; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft); }
.content-notes-pin {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  background: transparent;
  color: var(--ink);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
}