/* ==========================================================================
   tags.css - Version 1.1 - Stand 2026.09.05
   ========================================================================== */

/* ==========================================================================
   Tags
   Base-element styling for tags that style.css does not cover yet. Classless:
   everything is selected by tag, the same way h1-h6, paragraphs and lists are
   styled in style.css. No module, no module classes.

   Working state: this lives in its own file while we work on it. It merges into
   style.css when we tidy up. The form styling that once sat in a separate
   forms.css has already been folded in here (see "Forms" below).

   Loads AFTER style.css, so it reads the same variables (colours, fonts, size
   scale, spacing scale).

   Scope: every classless content tag an author may reach for in running text,
   so nothing falls back to a browser default that sits outside the system.
   Structural containers (article, section, aside, nav, header, footer) belong
   to the layout and module system and are NOT styled here. What style.css
   already covers is not repeated.

   Monospace: there is no font variable for a monospace family (the two site
   fonts are both sans-serif), so the "monospace" keyword stack is the only
   sensible value for code-like tags and is written out where it is used.
   ========================================================================== */

/* ==========================================================================
   Text blocks
   Block-level running text other than the paragraph. All share the paragraph
   rhythm: no gap above, half a line below (--rhythm-text), so a pre or a quote
   sits at the same distance from the next block as a paragraph does. Without a
   margin they would run with the browser default (~1em), which is off the
   scale.
   ========================================================================== */

/* Preformatted text, used for code samples. Line breaks and indentation are
   kept, but long lines wrap instead of running off the screen; this site has
   no horizontal scrolling. */
pre {
  margin: 0 0 var(--rhythm-text) 0;
  white-space: pre-wrap;      /* keep the line breaks and indentation, but wrap long lines */
  overflow-wrap: break-word;  /* break inside a long unbroken token too, so nothing overflows */
  padding: var(--space-4) var(--space-5);
  background-color: var(--gray-lightest-color);  /* a faint ground sets the block apart, no border needed */
  font-family: monospace;
}

/* A quotation set off from the text: indented from the left, marked by a rule
   on the inside edge. Its own paragraphs keep their rhythm; the block adds the
   indent and the rule. */
blockquote {
  margin: 0 0 var(--rhythm-text) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--rule-color);
}

/* Definition list. The whole list follows the paragraph rhythm; inside, a term
   binds to its description with the tight rhythm, and the description is
   indented so the pairing reads. */
dl {
  margin: 0 0 var(--rhythm-text) 0;
}

dt {
  font-weight: 600;
}

dd {
  margin: 0 0 var(--rhythm-tight) 0;
  padding-left: var(--space-5);
}

/* A postal address or contact block. Browsers slant it by default; kept
   upright to match the running text, only the rhythm is set. */
address {
  margin: 0 0 var(--rhythm-text) 0;
  font-style: normal;
}

/* ==========================================================================
   Horizontal rule
   A thin divider, no shading. The default border is replaced by a single
   hairline in the divider colour, with a full line of air above and below.
   ========================================================================== */
hr {
  margin: var(--rhythm-text) 0;
  border: 0;
  border-top: 1px solid var(--rule-color);
}

/* ==========================================================================
   Table
   Collapsed borders, full width, hairline rules in the divider colour. Cell
   padding from the spacing scale. The caption reads as a small heading above
   the table; header cells are bold and left-aligned like the body cells.
   ========================================================================== */
table {
  margin: 0 0 var(--rhythm-text) 0;
  width: 100%;
  border-collapse: collapse;
}

caption {
  padding-bottom: var(--space-2);
  font-weight: 600;
  text-align: left;
}

th,
td {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--rule-color);
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 600;
}

/* ==========================================================================
   Code and machine output, inline
   The inline counterparts of pre: a bit of monospace text inside a sentence.
   Same faint ground as the pre block, a little breathing room inside. pre
   itself sits in "Text blocks" above.

     code  a fragment of code
     kbd   keyboard input
     samp  program output
     var   a variable or placeholder (italic, no ground - it reads in the text)
   ========================================================================== */
code,
kbd,
samp {
  padding: 0 var(--space-1);
  background-color: var(--gray-lightest-color);
  font-family: monospace;
}

var {
  font-style: italic;
}

/* ==========================================================================
   Inline semantics
   Text-level tags. Most browser defaults are already right and are left alone
   on purpose: strong and b stay bold, em and i italic, u underlined, s and del
   struck through. Only the tags whose default touches a system value - a
   colour, a size, or a position - are set here.
   ========================================================================== */

/* A highlight. The browser paints it black on yellow; swapped to the system
   ground and text colour so it sits in the palette. */
mark {
  background-color: var(--gray-lightest-color);
  color: var(--text-color);
}

/* Inserted text: browsers underline it, which reads as a link on this site
   (links carry no underline, so an underline elsewhere is misleading). Marked
   instead by the same faint ground as a highlight. del keeps its default
   strike-through. */
ins {
  text-decoration: none;
  background-color: var(--gray-lightest-color);
}

/* Fine print: the small size step, with its paired line height (a size and its
   line height are always set together). */
small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

/* Sub- and superscript: the classic rule that raises or lowers the glyph
   without opening up the line it sits in. */
sub,
sup {
  font-size: 75%;      /* the standard subscript/superscript reduction, not a text size */
  line-height: 0;      /* so the shifted glyph does not stretch its line */
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* An abbreviation that carries a title: a dotted underline marks that the full
   form is available on hover, and a help cursor confirms it. Only when the
   title is present - a bare abbr gets nothing. */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* A defining instance of a term. Browsers italicise it; kept, only stated so
   the intent is on record. */
dfn {
  font-style: italic;
}

/* ==========================================================================
   Embedded media
   Raw behaviour only, no design: keep the media from overflowing its column
   and give it the block rhythm. No border, no colour, no radius - a module or
   the author decides the look.
   ========================================================================== */
video,
audio,
iframe,
canvas,
svg,
embed,
object,
img {
  max-width: 100%;
}

/* The ones that are blocks in their own right take the block rhythm; svg and
   img are handled elsewhere (img in style.css) or sit inline, so they are left
   out of this rhythm rule. */
video,
audio,
iframe,
canvas,
embed,
object {
  display: block;
  margin: 0 0 var(--rhythm-text) 0;
}

/* An iframe brings a browser border by default; removed, it has no place in
   the flat page. */
iframe {
  border: 0;
}

/* meter and progress: keep them from stretching past the column. They stay
   inline, so no block margin. */
meter,
progress {
  max-width: 100%;
}

/* ==========================================================================
   Disclosure
   A native expand/collapse. The behaviour is the browser's; only the block
   rhythm and a pointer on the summary are set, so it reads as clickable.
   ========================================================================== */
details {
  margin: 0 0 var(--rhythm-text) 0;
}

summary {
  cursor: pointer;
}



/* ==========================================================================
   Forms
   Base-element styling for native form controls. Classless: everything is
   selected by tag and input type, the same way h1-h6, paragraphs and lists are
   styled in style.css. No module, no module classes.

   Working state: this lives in its own file for quick testing. Two things here
   belong to the global stylesheet and move into style.css when we tidy up:
   the status colours (--error-color / --success-color) into the colour list,
   and everything else can be merged as-is.

   Loads AFTER style.css, so it reads the same variables (colours, fonts, size
   scale, spacing scale) and adds nothing that already has a scale.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Status colours — role, not look. Not form-specific: reusable for messages,
   notices, or anything else that needs a "went wrong" / "went well" colour.
   Chosen to stay clearly apart from the brand orange (--primary-color,
   #FF2B05) and to read on both the light and the dark ground.

   Follows the same pattern as the colours in style.css: a light-mode default
   on :root, a dark store, and both dark triggers (OS choice and hand-picked
   theme) mapping the store onto the role.
   -------------------------------------------------------------------------- */
:root {
  --error-color: #D32F2F;    /* light mode: error / danger / invalid */
  --success-color: #2E7D32;  /* light mode: success / valid / confirmed */

  --dark-error-color: #F27272;    /* lifted so it keeps its punch on the dark ground */
  --dark-success-color: #6FCF7A;

  /* The one radius shared by every control. Matches the radius that already
     recurs most in style.css. */
  --form-radius: 7px;
}

/* OS is set to dark and the visitor has not forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --error-color: var(--dark-error-color);
    --success-color: var(--dark-success-color);
  }
}

/* The visitor chose dark by hand. Same map, separate rule (a media selector and
   a plain one cannot share a selector list). */
:root[data-theme="dark"] {
  --error-color: var(--dark-error-color);
  --success-color: var(--dark-success-color);
}

/* --------------------------------------------------------------------------
   The single most important rule: controls do not inherit font or colour on
   their own, so without this they fall back to the browser default (Arial).
   -------------------------------------------------------------------------- */
input,
select,
textarea,
button {
  font: inherit;
  color: inherit;
}

/* Brand the native indicators of checkbox, radio, range and colour inputs in
   one line, no custom markup needed. */
input {
  accent-color: var(--primary-color);
}

/* The native checkbox and radio boxes are tiny next to this large body type;
   size them to the field text so they sit level with their label. flex: none
   keeps the flex row (the label wraps them) from squashing the box. */
input[type="checkbox"],
input[type="radio"] {
  width: var(--font-size-small);
  height: var(--font-size-small);
  flex: none;
}

/* --------------------------------------------------------------------------
   The text-entry family: text-like inputs, select and textarea share one box
   so they read as one set. :where() keeps the specificity at zero, so any
   later rule (a state class below, for instance) overrides it without a fight.
   -------------------------------------------------------------------------- */
input:where(
    :not([type]),
    [type="text"], [type="password"], [type="url"], [type="email"],
    [type="tel"], [type="search"], [type="number"], [type="date"],
    [type="month"], [type="week"], [type="datetime"], [type="datetime-local"]
  ),
select,
textarea {
  display: block;
  width: 100%;
  /* Font size, padding and radius match a main-menu entry, so a field and a
     menu item read at the same weight. */
  font-size: var(--font-size-small);
  padding: var(--space-2) var(--space-5);
  background-color: var(--background-color-light);
  border: 1px solid var(--gray-light-color);
  border-radius: var(--form-radius);
}

/* Textarea: grow only downward when dragged; its height comes from the rows
   attribute and the content, never a fixed value. */
textarea {
  resize: vertical;
}

/* --------------------------------------------------------------------------
   Labels. Stacked above their field by default. Checkbox and radio labels wrap
   their input instead, so those go back to one inline row via :has().
   -------------------------------------------------------------------------- */
label {
  display: block;
  margin-bottom: var(--space-1);
}

label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Field help text. There is no HTML element for a field description; the
   convention is a <small> under the control, tied to it with aria-describedby
   so a screen reader reads it as part of the field. Muted and one size step
   below the field text.
   -------------------------------------------------------------------------- */
form small {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-x-small);
  color: var(--gray-mid-color);
}

/* --------------------------------------------------------------------------
   Fieldset and legend. The browser's inset border and padding are removed; the
   legend carries the group title on its own.
   -------------------------------------------------------------------------- */
fieldset {
  margin: 0 0 var(--space-6) 0;
  padding: 0;
  border: 0;
}

legend {
  font-weight: 600;
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Focus. One visible ring for every control, in the brand colour, replacing
   the browser default. :focus-visible keeps it out of the way on mouse clicks.
   -------------------------------------------------------------------------- */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   States. Error and valid mark the field by border colour; disabled dims and
   changes the cursor.
   -------------------------------------------------------------------------- */
.is-error {
  border-color: var(--error-color);
}

.is-valid {
  border-color: var(--success-color);
}

input:disabled,
select:disabled,
textarea:disabled,
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Buttons. One filled shape for every button and button-like input; the type
   (submit / button / reset) is not distinguished by colour, only disabled is.
   -------------------------------------------------------------------------- */
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-block;
  width: auto;
  font-size: var(--font-size-small);
  padding: var(--space-2) var(--space-5);
  color: var(--text-color-on-primary);
  background-color: var(--primary-color);
  border: 0;
  border-radius: var(--form-radius);
  cursor: pointer;
  transition: background-color 0.12s ease;
}

/* Hover: the orange darkens a step, mixed from the one orange source so there
   is no second hex to keep in sync. Disabled buttons stay put. */
button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--primary-color) 85%, black);
}