/* The note that makes the gift (docs/brand/CREATIVE-COMMERCE-WAVE-1.md, item B): a helper around the greeting field of the order form.
   The server prints the first block complete and in its final place; it shows only where scripting is on (html.zf-note is set before the
   page is drawn), so showing it moves nothing, and note-helper.js then wires it up. The second block (counter, signature, card) stays
   hidden until the greeting has text: it answers the visitor's own typing and is never part of what a loading page reserves.
   The field itself is a plain textarea and needs none of this. Flat surfaces, ink rims, the site's radii; nothing here moves, so reduced
   motion has nothing to take away. */
/* Landing on #note (the quick path does) leaves room above the helper for the fieldset's legend to show whole. The anchor sits a legend and
   a padding below the legend's top (50px at 390), and on a fresh load the basket above it arrives after the first scroll: Chromium keeps the
   anchor where the margin put it, WebKit scrolls again and ends about 34px short. 6rem keeps the legend whole in both (measured at 390 and
   1440: +46 and +36px in Chromium, +12 and +37px in WebKit; 4.5rem left it 13px under the top edge in WebKit at 390). The anchor carries the
   same margin inline (note-helper-view.php): this file is not loaded when only the quick path is on. */
.note-anchor { scroll-margin-block-start: 6rem; }
.note-top, .note-bottom { display: none; }
html.zf-note .note-top, html.zf-note .note-bottom:not([hidden]) { display: grid; gap: .75rem; }

/* The lower half is printed before the greeting label and seated under it by order; the script then moves it there for real (data-placed),
   so the keyboard follows what the eye sees. */
.note-top { order: -3; }
.form-stack > label:has(> textarea[name=greeting]) { order: -2; }
.note-bottom { order: -1; }
.note-bottom[data-placed] { order: 0; }

/* First half: heading, one line of help, the wordings to start from (or the event chooser), and one quiet line while the field is empty. */
.note-top { align-content: start; padding: 1rem; border-radius: 12px; background: var(--tint); }
.note-title { margin: 0; font-size: 1.3rem; }
.note-text { margin: 0; }
.note-start, .note-sign { margin: 0; padding: 0; border: 0; }
.note-start legend, .note-sign legend { margin-block-end: .5rem; padding: 0; font-size: 1rem; font-weight: 700; }
/* The legend of the sympathy state names the group for a screen reader only: there is nothing to start from. */
.note-start legend.sr-only { margin: -1px; }
.note-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .5rem; }
.note-events { display: flex; flex-wrap: wrap; }
.note-chip {
  min-block-size: 44px;
  padding-block: .5rem;
  padding-inline: .9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
  line-height: 1.4;
  text-align: start;
  overflow-wrap: anywhere;
}
.note-events .note-chip { text-align: center; }
.note-chip[aria-current=true] { background: var(--citron); border-color: var(--ink); }
.note-change {
  justify-self: start;
  min-block-size: 44px;
  margin-block-start: .25rem;
  padding-inline: .25rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
}
/* One quiet, small line: the reassurance while the field is empty (it goes with the first word typed) and, once the customer has chosen
   sympathy, the sentence that stands where the wordings would be. */
.note-quiet { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.note-sympathy { margin: 0; line-height: 1.55; }

/* On a narrow screen the helper sits straight on the page: no tinted box (it would be a third frame inside the fieldset's own), and the
   wordings take the ink rim of the site's secondary actions so they still read as things to press. */
@media (width < 42rem) {
  .note-top { padding: 0; border-radius: 0; background: none; }
  .note-chip { border-color: var(--ink); }
}

/* Second half, under the field: the soft counter (close under the field it speaks about), the signature, the card. */
.note-bottom { margin-block-start: -.5rem; }
.note-count { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.note-count[data-mode=near], .note-count[data-mode=limit] { color: var(--ink); }
.note-count[data-mode=limit] { font-weight: 700; }
.note-signs { display: flex; flex-wrap: wrap; gap: .5rem; }
.note-sign label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}
/* The real radio lies invisibly over the whole chip, border included, so the target is the chip's full 44px. None starts checked:
   nothing chosen means no signature, and nothing is painted as chosen. */
.note-sign label input[type=radio] { position: absolute; inset: -1px; inline-size: calc(100% + 2px); block-size: calc(100% + 2px); margin: 0; opacity: 0; cursor: pointer; }
.note-sign label:has(input:checked) { background: var(--citron); border-color: var(--ink); }
.note-sign label:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 4px; }

/* The card: a small gift tag with a hole, lines kept as written, long words broken rather than left to push the page sideways.
   It only exists on screen while the greeting has text, so it never shows empty. */
.note-preview { display: grid; gap: .5rem; margin: 0; }
.note-preview figcaption { color: var(--ink); font-size: .95rem; font-weight: 700; }
.note-card {
  position: relative;
  max-inline-size: 32rem;
  min-block-size: 6rem;
  padding: 1.6rem 1rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 12px;
  background: var(--citron);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-card::before {
  content: "";
  position: absolute;
  inset-block-start: .55rem;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: .55rem;
  block-size: .55rem;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

/* Backgrounds are dropped in forced colours, so what is chosen keeps a line of its own. */
@media (forced-colors: active) {
  .note-sign label:has(input:checked), .note-chip[aria-current=true] { outline: 2px solid Highlight; outline-offset: -4px; }
}

@media (hover: hover) and (pointer: fine) {
  .note-chip:hover, .note-sign label:hover { background: var(--citron); }
  .note-change:hover { text-decoration-thickness: 2px; }
}