/* 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", amber is "waiting for its first run" (the Jobs page's dot, 26 Oct 2026). 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: #6B635A;   /* quiet text: #7E756A read at 4.4:1 on ivory, under the 4.5 a line of text needs; 5.8 now (28 Oct 2026) */
  --gold: #9A7B3F; --gold-deep: #7E6331; --gold-soft: #F2EADC;
  --black: #2A2521; --green: #3F7149; --green-soft: #EAF3EA; --amber: #C98A2E;   /* green darkened from #4E8A5A, which read at 4.0:1 on ivory, to 5.6 (28 Oct 2026) */

  /* 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); --waiting: var(--amber);
}

/* 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;
  grid-column: 1 / -1; flex-basis: 100%; width: 100%; box-sizing: border-box; }   /* a whole row wherever it lands, so a grid or a flex row is never shifted by it (26 Oct 2026) */
/* Since 29 Oct 2026 the line is a slip that slides away (designs/said.js); what stays is a burgundy edge on each box put
   back, until the page is saved, so the eye still finds what was typed and not sent. */
.is-restored { box-shadow: inset 3px 0 0 var(--wine); }

/* The house's space, named by what it separates (Vikrant, 30 Oct 2026: "think batching for clean presentation"). The
   sheets had used some twenty spacings, 8, 10, 12 and 14 px the most, so the gap inside a group and the gap between
   groups were never told apart. A screen drawn or redrawn takes its space from these. A tile is a small card holding one
   figure, four of them across a column (the Home's Pulse, 31 Oct 2026): a card's 24 would leave its words no width. */
:root { --in-a-batch: 4px; --between-batches: 16px; --inside-a-card: 24px; --inside-a-tile: 16px; --between-cards: 24px; --between-sections: 40px; }

/* A batch: a title and its tagline, a label and its field, a line and its facts. Its lines sit at their own line height,
   "almost like a tagline to the above"; space goes between batches, never inside one. */
.batch > * { margin-block: 0; }
.batch > * + * { margin-block-start: var(--in-a-batch); }

/* Every field wears the house's dress unless its screen dresses it otherwise (30 Oct 2026: "the dates field are
   seriously ugly"). Inside :where() these weigh nothing, so a screen's own rule always wins. The dropdown keeps the
   browser's arrow: some fifty screens set a dropdown's background whole, which would wipe an arrow drawn here. */
:where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range], [type=color], [type=submit], [type=button], [type=reset], [type=image]), select, textarea) {
  box-sizing: border-box; min-height: 44px; max-width: 100%; padding: 10px 14px; border: 1px solid var(--rule); border-radius: 12px;   /* 44px: a finger's target */
  background-color: var(--ivory); color: var(--ink); font: inherit;   /* ivory by name: the Office's older sheet makes --surface a cream the screens' own fields do not wear */
  line-height: normal;   /* the page's own line height came in with the face and stood a box 4px above the dropdown beside it */
}
:where(textarea) { line-height: 1.5; }
:where(input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=number]) { font-variant-numeric: tabular-nums; }
/* Chrome's dropdown stands 2px taller than a box with the same padding, in Lato and Manrope at 16 and 17.6px alike
   (measured 30 Oct 2026); a pixel less above and below puts a row of fields on one height. */
:where(select) { padding-block: 9px; }
/* A field still empty speaks in the quiet grey: the browser's own placeholder grey is cold, and an empty date in full
   ink read as a date typed in (the blind reader, 30 Oct 2026). Only a required date can be told empty from outside. */
:where(input, textarea)::placeholder { color: var(--quiet); opacity: 1; }
:where(input[type=date]:required:invalid, input[type=time]:required:invalid)::-webkit-datetime-edit { color: var(--quiet); }
/* The ticks and the choices take the house's wine. */
:where(input[type=checkbox], input[type=radio]) { accent-color: var(--wine); }
/* Chrome pads a date field's insides and its calendar icon, which stood it 6px taller than the box and the dropdown beside
   it; with that padding gone, a row of fields shares one height. */
:where(input[type=date], input[type=time], input[type=datetime-local], input[type=month])::-webkit-calendar-picker-indicator { cursor: pointer; padding: 0; margin-block: 0; margin-inline-end: -8px; }   /* in ink, at the inset of the dropdown's arrow */
:where(input[type=date], input[type=time], input[type=datetime-local], input[type=month])::-webkit-datetime-edit { padding: 0; }
:where(input[type=date], input[type=time], input[type=datetime-local], input[type=month])::-webkit-datetime-edit-fields-wrapper { padding: 0; }
:where(input:focus-visible, select:focus-visible, textarea:focus-visible) { outline: 2px solid var(--wine); outline-offset: 1px; }
:where(input:disabled, select:disabled, textarea:disabled) { background-color: var(--paper); color: var(--quiet); }