/* The house palette, named once (Vikrant, 5 Oct 2026). Every page loads this first and
   picks from it for the page's objective: shades of red (burgundy first, crimson only to
   mean "today"), black, the white-to-beige range, gold. Any other colour appears only to
   mean something — green is "all clear". A page never invents a shade of its own. */
:root {
  /* the shades, by name */
  --burgundy: #7A1F2B; --burgundy-deep: #5E1520; --crimson: #B3261E; --crimson-deep: #8C1D17; --rose: #F5E7E9; --rose-deep: #E9C3C8;
  --ivory: #FDFCFA; --cream: #F6F3EE; --beige: #E4DED4; --walnut: #5C544B; --walnut-light: #7E756A;
  --gold: #9A7B3F; --gold-deep: #7E6331; --gold-soft: #F2EADC;
  --black: #2A2521; --green: #4E8A5A; --green-soft: #EAF3EA;

  /* the working names the stylesheets use */
  --wine: var(--burgundy); --wine-deep: var(--burgundy-deep); --wine-on: #FFF4F2; --wine-soft: var(--rose);
  --red: var(--crimson); --red-deep: var(--crimson-deep); --red-soft: #F4C9C5;
  --paper: var(--cream); --surface: var(--ivory); --rule: var(--beige);
  --ink: var(--black); --soft: var(--walnut); --quiet: var(--walnut-light);
  --fine: var(--green); --fine-soft: var(--green-soft);
}

/* A photograph chosen is a photograph shown (14 Oct 2026): the strip under any image upload, the same on every
   screen — the picture, its name, a cross to leave it out before it is sent. Drawn by designs/photos.js. */
.photo-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.photo-previews[hidden] { display: none; }
.photo-preview { position: relative; margin: 0; width: 96px; display: flex; flex-direction: column; gap: 4px; }
.photo-preview img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); display: block; }
.photo-preview figcaption { font-size: .7rem; color: var(--quiet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-out { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.photo-out:hover { border-color: var(--wine); color: var(--wine); }

/* The draft keeper's one line (22 Oct 2026): what was typed and not yet saved has been put back. */
.draft-restored { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--wine, #7A1F2B); color: var(--wine, #7A1F2B); background: rgba(122, 31, 43, .06); font-size: .9rem; }