/* Define once on :root — available everywhere */
:root {
  --gold: #8F6D55;
  --border: #C8C4C0;
}

/* Use anywhere with var() */
.section-block {
  border: 1px solid var(--border);
}

/* Dark mode overrides just the variable — all usages update */
html.dark-mode {
  --border: rgba(255,255,255,0.12);
}

APP.mode                  // which tab is active: 'transfers', 'itinerary', etc.
APP.previewTimerTransfers  // debounce timer for Transfers preview
APP.previewTimerItin       // debounce timer for Itinerary preview
APP.blocks                 // array of all current input block objects
APP.settings               // loaded settings from cloud / localStorage

// Get the element, then read its value
var nameEl = document.getElementById('guest-name');
var name   = nameEl ? nameEl.value.trim() : '';

var html = `
  <div class="transfer-header">
    <span>${name}</span>
    <span>${date}</span>
  </div>
`;

// Clear any existing timer, then set a new one
if (APP.previewTimerTransfers) clearTimeout(APP.previewTimerTransfers);
APP.previewTimerTransfers = setTimeout(() => {
  requestAnimationFrame(() => generateTransfer(true));
}, 100); // ms to wait after last keystroke

const frag = document.createDocumentFragment();

pagesHtmlArray.forEach((html, i) => {
  const div = document.createElement('div');
  div.innerHTML = html;
  frag.appendChild(div);
});

// One atomic operation — page doesn't flicker
container.replaceChildren(frag);

In the [Arrival / Departure / Experience] block, the [Time / Date / Airport] field
has its underline at a different vertical level than the [other field name] field
beside it. Please align all three underlines to the same baseline.

The [element name] in the [section / block name] is showing a full box border instead
of the underline-only style used on all other fields. Please remove the top, left, and
right borders and keep only the bottom border, matching the other inputs.

The [section / block / card] in the [tab name] tab has too much [padding / margin]
[above / below / between items]. Please reduce it to match the spacing used in the
[reference section] section.

The [label / heading / sub-label] on the [element / section] is [too bold / too large /
the wrong colour]. Please change the font-weight to [300 / 400 / 500] and the colour
to [muted / gold / text] to match the style used in [reference area].

The [list / group of items] in [Settings tab / section name] is displayed as a single
column. Please convert it to a [2 / 3]-column grid layout, similar to the Activity
Categories chip grid in Settings → Itinerary.

The [element name] looks correct in light mode but in dark mode the [background /
border / text colour] does not update. Please add a dark-mode CSS override so it
uses [the appropriate CSS variable] instead of the hardcoded colour.

When I type in the [field name] field on the [tab name] tab, the preview panel
does not update. It only updates after I [describe what does trigger it, e.g. change
the date or airport]. Please ensure that oninput on that field calls schedulePreview.

The preview panel in the [tab name] tab briefly goes blank for a fraction of a second
every time it updates. Please ensure the DOM rebuild uses the DocumentFragment /
replaceChildren pattern to make the swap atomic and flicker-free.

The [button / checkbox / dropdown] for [feature name] in the [section / block] does
not respond when I [click / change / select]. Please check whether the onclick /
onchange / oninput attribute is wired to the correct function.

The preview on the [tab name] tab feels sluggish — there is a noticeable delay
after I stop typing before it updates. Please reduce the debounce timeout in
schedulePreview for that tab from [current ms] to [target ms].

The [airport list / category list / activity list] in Settings → [tab name] shows
duplicate entries — the same [label / name] appears [2 / 3] times. Please add
deduplication (case-insensitive, by label) both when loading and when saving the list.

The [setting name] in Settings → [tab name] resets to its default value every time
I reload the page. Please ensure the value is included in the cloudSave call and
loaded correctly when the settings panel initialises.

The [field name] field in the [tab / block] defaults to [current value] on a fresh
load. Please change the default to [desired value] — either in the HTML placeholder
attribute or in the initialisation function that populates the form.

Please add a new [text / date / select] field called "[label text]" to the
[section name] in the [tab name] tab. It should sit [before / after / beside]
the [adjacent field name] field, and its value should be included in the preview
output [where in the preview document].

Please add a new option to Settings → [tab name] that lets me [describe the
setting]. It should appear as a [feature card button / checkbox / text input]
and be saved via cloudSave under the key "[key name]".

Please redesign the [section name] in [Settings tab / tab name]. Instead of the
current [single column / flat list] layout, use [2-column grid / feature card
buttons / chip grid] to make it feel more professional. Keep all existing
functionality — only change the visual presentation.

Please move the [element / section name] from its current position [describe
where it is now] to [describe the target position — e.g. directly below the
Color Scheme section, inside the same section block]. Remove any leftover empty
space where it used to be.

Please remove the [label text / element / button] from the [section / block /
field] in the [tab name] tab. Keep the [adjacent element] in place — only
remove [the specific thing] and close up the resulting gap.