/* ============================================================================
   HC PUBLIC SYSTEM — the shared public surface of the Humanity Collective.

   Every value below is copied from one of the three committed visual
   authorities rather than re-picked by eye:

     templates/hc_v1.html               the homepage, frozen by UI-T1
     templates/public_register.html     the public form,   frozen by UI-H1A
     templates/collective_standing.html the public record, frozen by UI-H1A

   Those three templates are not modified and do not consume this file. They
   keep their own inline systems; this sheet exists so the remaining public
   pages can join the same family without each one re-deriving the tokens.

   UI-H1B-1 introduces it with exactly one consumer, the Families overview, and
   carries only the primitives that page actually renders. Components for the
   later phases — form controls, filled buttons, chips, notices — are
   deliberately absent and belong to the phase that first needs them.

   Conventions:
     - one namespace, .hc-public-*, so nothing here can reach an unrelated page
     - logical properties only, so RTL is geometry rather than a mirrored copy
     - no @font-face, no @import, no asset reference: font delivery stays with
       the consuming template, exactly as it is today
     - no rule targets the shared demo-banner partial
   ========================================================================== */

/* ===== HC PUBLIC CORE — START ===================================== */

:root {
  /* Surfaces. The warm canvas and the near-white card are what make the family
     recognisable at a glance; a page running its own warmer set reads as a
     neighbouring product rather than the same one. */
  --hc-canvas: #F7F3E8;
  --hc-card: #FFFDF8;
  --hc-raised: #FFFFFF;

  /* Text ramp. Four steps, and nothing lighter: fineprint greys were what made
     the pre-harmonization pages feel provisional.
     Three of the four steps carry informational text, so three of them clear AA
     for normal-sized text on the worst surface they are painted on (the canvas):
     13.69, 5.33 and 4.56 to 1. --hc-text-disabled was #8A7F70 and 3.54, which
     failed on every surface and governed most of the product's captions —
     timestamps, provenance notes, "updated" lines, the hero's accountability
     line — so it moved the smallest step in the same hue that clears 4.5.
     --hc-text-hush stays at 2.48 because it is deliberately not a text step: it
     tints separators, hairlines, hover borders and a directional arrow. Anything
     a reader has to read uses one of the other three. */
  --hc-text-primary: #2A2520;
  --hc-text-secondary: #6B6359;
  --hc-text-disabled: #786D5F;
  --hc-text-hush: #A89A87;

  /* Restrained borders and shadows. Structure comes from the surface change,
     not from a hard rule around every box. */
  --hc-border: rgba(42,37,32,0.06);
  --hc-border-strong: rgba(42,37,32,0.12);
  --hc-shadow-card: 0 1px 2px rgba(42,37,32,0.04), 0 6px 18px -8px rgba(42,37,32,0.08);
  --hc-shadow-card-lift: 0 1px 2px rgba(42,37,32,0.05), 0 8px 24px -10px rgba(42,37,32,0.12);

  /* Navy carries the heading hierarchy; the accents carry emphasis.

     --hc-accent is read as text on the warm canvas — a count inside a title, a
     link inside a card — so it is bound by the 4.5:1 needed for normal-size text
     rather than the 3:1 a fill would need. Measured on the two grounds:

       --hc-accent       4.62:1 on the warm canvas, 5.04:1 on the card
       --hc-accent-deep  5.61:1 on the warm canvas, 6.12:1 on the card

     The earlier #C55325 read 4.08:1 on the canvas and 4.45:1 on the card, so
     accent text was under the line on both grounds, not just one. This is the
     same hue (17deg) at a lower lightness, which keeps the register and clears
     AA; white on it improves from 4.53:1 to 5.12:1 as well, so nothing that uses
     the accent as a fill is worse off either. */
  --hc-navy: #1E2A45;
  --hc-accent: #B74D22;
  --hc-accent-deep: #A4421C;

  /* Two orange registers, and the distinction is load-bearing. --hc-orange is
     decorative only; it is never used for text.

     --hc-orange-action is the resting action step and --hc-orange-action-deep
     is its hover, so an action deepens within one register instead of changing
     hue. Measured against the two grounds:

       --hc-orange-action       4.72:1 on the card, 4.33:1 on the warm canvas
       --hc-orange-action-deep  5.60:1 on the card, 5.14:1 on the warm canvas

     So the resting step clears AA on a card but not on the canvas: an action
     painted directly on the page ground needs the deep step at rest. The focus
     ring always uses the deep step, on either ground. */
  --hc-orange: #DF6324;
  --hc-orange-action: #C04F1A;
  --hc-orange-action-deep: #AE4616;

  /* One font stack for both scripts. The Arabic face leads the stack under
     html[dir="rtl"] below, so a single variable switch moves the whole page
     instead of duplicating selectors per script. */
  --sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* The chrome rail every public page shares, and the reading measure for
     record sections. A page whose content genuinely needs a different measure
     sets --measure itself; the rail stays put so the mastheads line up. */
  --hc-shell: 1440px;
  --measure: 920px;
}

/* Arabic is a variable switch, not a second stylesheet. The consuming template
   still decides whether to request the face at all. */
html[dir="rtl"] {
  --sans: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---- Base ---------------------------------------------------------------- */

/* Scoped to the opted-in body so this sheet can never restyle a page that has
   not joined the system. The canvas colour still reaches the viewport: with no
   background on the root element, the body's background propagates to it. */
body.hc-public,
body.hc-public * { box-sizing: border-box; }

body.hc-public {
  margin: 0;
  padding: 26px 40px 0;
  background: var(--hc-canvas);
  color: var(--hc-text-primary);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hc-public a { color: inherit; text-decoration: none; }

/* The chrome rail. */
.hc-public-shell { max-width: var(--hc-shell); margin: 0 auto; }

/* ---- Focus ---------------------------------------------------------------
   One visible ring for everything focusable. Never removed, never replaced by
   a colour change alone: the outline is the only affordance a keyboard reader
   gets. Offset and radius are the authority's. */
.hc-public a:focus-visible,
.hc-public [tabindex]:focus-visible {
  outline: 2px solid var(--hc-orange-action-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Masthead ------------------------------------------------------------ */

.hc-public-mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hc-border);
}

.hc-public-brand { display: flex; align-items: center; gap: 14px; }

.hc-public-brand .hc-public-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  transition: transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hc-public-brand:hover .hc-public-mark { transform: rotate(36deg); }

.hc-public-brand .hc-public-lockup {
  font-size: 17px;
  line-height: 1.0;
  letter-spacing: 0.02em;
}

/* The lockup sets at the family's size and weight. Whether the uppercase
   arrives from CSS or from the source string is the consuming page's business:
   this rule deliberately does not impose a text-transform, because the two
   authorities differ on that point and C2 pins each one's choice. */
.hc-public-brand .hc-public-lockup b {
  display: block;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.05;
}

.hc-public-brand .hc-public-lockup span {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.25;
  color: var(--hc-text-secondary);
}

/* ---- Actions -------------------------------------------------------------
   Two registers, both link-shaped, because that is what the public pages
   actually offer. Filled buttons arrive with the first form page.

   .hc-public-cta    the page's forward move — uppercase, letterspaced, orange
   .hc-public-quiet  a returning or lateral link — secondary ink, dotted rule

   Both carry vertical padding: an inline link's box is only as tall as its
   font, which leaves the hit target under the 24px minimum. */

/* Both action rules are qualified with the anchor type on purpose. The base
   `.hc-public a { color: inherit }` above is a class-plus-type selector, so a
   bare class here would lose the cascade and the action would silently render
   in body ink. The authorities qualify theirs the same way. */
.hc-public a.hc-public-cta {
  display: inline-block;
  padding-block: 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-orange-action);
  transition: color 180ms ease;
}

.hc-public-cta .hc-public-arrow {
  display: inline-block;
  margin-inline-start: 6px;
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* The arrow glyph already points the reading direction in the markup, so the
   nudge follows it instead of always travelling right. */
.hc-public-cta:hover .hc-public-arrow { transform: translateX(5px); }
html[dir="rtl"] .hc-public-cta:hover .hc-public-arrow { transform: translateX(-5px); }

.hc-public a.hc-public-quiet {
  display: inline-block;
  font-size: 14px;
  color: var(--hc-text-secondary);
  border-bottom: 1px dotted var(--hc-border-strong);
  padding-block: 3px 4px;
  transition: color 180ms ease, border-color 180ms ease;
}

.hc-public a.hc-public-quiet:hover {
  color: var(--hc-text-primary);
  border-color: var(--hc-text-secondary);
}

/* ---- Page head ---------------------------------------------------------- */

.hc-public-head { position: relative; padding: 44px 0 30px; }

.hc-public-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hc-text-secondary);
  margin-bottom: 16px;
}

/* Internal public pages carry a page title, not the homepage's 44px
   proposition. Register and Standing share this step so every page one level
   below the landing page reads as a sibling. */
.hc-public-title {
  margin: 0;
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.14;
  color: var(--hc-navy);
  max-width: 760px;
  text-wrap: balance;
}

/* A count inside the title is the sentence's subject, so it takes the accent —
   upright and tabular rather than italic, which is how the family sets
   numerals. */
.hc-public-title em {
  color: var(--hc-accent);
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hc-public-lead {
  margin: 22px 0 0;
  font-size: 18px;
  font-weight: 450;
  line-height: 1.6;
  color: var(--hc-text-secondary);
  max-width: 56ch;
}

.hc-public-lead .hc-public-num {
  color: var(--hc-orange-action-deep);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---- Section frame ------------------------------------------------------
   A real section step in navy, with the descriptive line kept underneath in
   readable secondary ink rather than greyed into italic fineprint. */

.hc-public-block { margin-top: 48px; max-width: var(--measure); }

/* Element-agnostic on purpose. A section title carries the heading level its
   page already established — Household's two are h2 — so the class must not
   depend on the tag, and must zero the heading margin a browser would add. */
.hc-public-block-title {
  font-family: var(--serif);
  font-size: 25.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--hc-navy);
  margin-top: 0;
  margin-bottom: 8px;
}

.hc-public-block-note {
  font-size: 16px;
  line-height: 1.55;
  color: var(--hc-text-secondary);
  margin-bottom: 20px;
  max-width: 62ch;
}

/* ---- Panels and rows ---------------------------------------------------
   The warm card, thin border, 16px radius and soft shadow are the homepage's.
   Rows carry their own grid in the consuming page, because how many columns a
   record needs is a property of the record. */

.hc-public-panel {
  background: var(--hc-card);
  border: 1px solid var(--hc-border);
  border-radius: 16px;
  box-shadow: var(--hc-shadow-card);
  padding: 6px 20px;
}

.hc-public-row {
  display: grid;
  gap: 16px;
  padding: 16px 10px;
  margin: 0 -10px;
  border-radius: 10px;
  align-items: baseline;
  border-top: 1px solid var(--hc-border);
  transition: background 180ms ease;
}

.hc-public-row:hover { background: rgba(42,37,32,0.03); }

/* ---- Metrics and metadata ---------------------------------------------- */

.hc-public-metric {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hc-text-primary);
}

.hc-public-metric span {
  color: var(--hc-text-secondary);
  font-size: 13.5px;
  font-weight: 400;
  margin-inline-start: 6px;
}

.hc-public-meta {
  display: block;
  color: var(--hc-text-secondary);
  font-size: 14px;
  line-height: 1.5;
  margin-top: 3px;
}

/* ---- Bridge ------------------------------------------------------------
   The panel that carries a page's forward move. */

.hc-public-bridge {
  margin: 56px 0 0;
  max-width: var(--measure);
  padding: 22px 24px 20px;
  border: 1px solid var(--hc-border-strong);
  border-radius: 16px;
  background: var(--hc-card);
  box-shadow: var(--hc-shadow-card);
  transition: box-shadow 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.hc-public-bridge:hover {
  box-shadow: var(--hc-shadow-card-lift);
  border-color: var(--hc-text-hush);
  transform: translateY(-1px);
}

/* The action deepens on hover rather than changing hue: rest is the action step,
   hover is the deeper step of the same register. */
.hc-public-bridge:hover a.hc-public-cta { color: var(--hc-orange-action-deep); }

.hc-public-bridge .hc-public-bridge-note {
  margin-top: 8px;
  font-size: 16px;
  color: var(--hc-text-secondary);
  max-width: 62ch;
  line-height: 1.55;
}

/* ---- Foot -------------------------------------------------------------- */

.hc-public-foot {
  margin-top: 32px;
  padding: 22px 0 32px;
  border-top: 1px solid var(--hc-border);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: var(--hc-text-secondary);
}

.hc-public-foot a {
  display: inline-block;
  border-bottom: 1px dotted var(--hc-border-strong);
  padding-block: 3px 4px;
}

.hc-public-foot a:hover { color: var(--hc-text-primary); border-color: var(--hc-text-secondary); }

/* ---- Empty state -------------------------------------------------------
   An empty section is a true statement about the record, so it is set as
   readable prose in secondary ink — not as an apology in grey italics. */

.hc-public-empty {
  color: var(--hc-text-secondary);
  font-size: 16px;
  padding: 18px 2px;
}

/* ---- Responsive --------------------------------------------------------
   Two steps, matching the authorities: the tablet step relaxes the display
   sizes, the phone step resets the page gutter. */

@media (max-width: 1080px) {
  .hc-public-title { font-size: 36px; }
  html[dir="rtl"] .hc-public-title { font-size: 33px; line-height: 1.34; }
}

@media (max-width: 720px) {
  body.hc-public { padding: 18px 16px 0; }
  .hc-public-head { padding: 32px 0 24px; }
  .hc-public-title { font-size: 30px; line-height: 1.18; }
  html[dir="rtl"] .hc-public-title { font-size: 27px; line-height: 1.38; }
  .hc-public-lead { font-size: 16.5px; }
  html[dir="rtl"] .hc-public-lead { font-size: 16px; line-height: 1.72; }
  .hc-public-block { margin-top: 38px; }
  .hc-public-block-title { font-size: 23px; }
  .hc-public-panel { padding: 4px 14px; border-radius: 14px; }
  .hc-public-bridge { padding: 20px 18px 18px; border-radius: 14px; }
}

/* ---- Arabic ------------------------------------------------------------
   Tuned independently rather than scaled from the English metrics: the face
   sets larger and heavier per px, so sizes step down while the leading opens
   up. Never letter-spaced — that would break the joins. */

html[dir="rtl"] .hc-public-title {
  font-family: var(--sans);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: normal;
  word-spacing: 0.02em;
  line-height: 1.34;
}

html[dir="rtl"] .hc-public-title em { font-style: normal; }

html[dir="rtl"] .hc-public-lead {
  font-size: 17.5px;
  font-weight: 400;
  line-height: 1.68;
  max-width: 58ch;
}

html[dir="rtl"] .hc-public-eyebrow { letter-spacing: 0.06em; }

html[dir="rtl"] .hc-public-block-title {
  font-family: var(--sans);
  font-size: 24px;
  letter-spacing: normal;
  line-height: 1.42;
}

html[dir="rtl"] .hc-public-block-note { line-height: 1.7; }

html[dir="rtl"] .hc-public-cta { letter-spacing: 0.04em; }

/* ===== HC PUBLIC CORE — END ======================================= */


/* ===== HC PUBLIC FORMS — START ====================================
   Added by UI-H1B for Join Implementer and Solidarity. Every value is
   translated from templates/public_register.html, the frozen form authority,
   rather than re-picked: Register is the one public form that has already been
   through this migration, so matching it is what makes the second and third
   forms siblings instead of cousins.
   ================================================================== */

:root {
  /* Two tokens the core does not carry, because only a form needs them.

     A form control needs a boundary the eye can find. The decorative
     --hc-border is rgba(42,37,32,0.06) — about 1.1:1, which vanishes as a field
     edge — so a field takes the palette's warm grey at 3.86:1 against the card,
     clearing the 3:1 non-text minimum. --hc-err is Register's error red. */
  --hc-field-border: #8A7F70;
  --hc-err: #B23A22;
}

/* ---- Form surface -------------------------------------------------------
   One principal surface with internal sections, not a card per question. */

.hc-public-form {
  background: var(--hc-card);
  border: 1px solid var(--hc-border);
  border-radius: 16px;
  box-shadow: var(--hc-shadow-card);
  padding: 30px 28px 26px;
}

.hc-public-fieldset {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--hc-navy);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hc-border-strong);
}

.hc-public-field { margin-bottom: 18px; }
.hc-public-field:last-child { margin-bottom: 0; }

.hc-public-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.hc-public-rule {
  border: none;
  border-top: 1px solid var(--hc-border);
  margin: 24px 0;
}

/* ---- Labels and help --------------------------------------------------- */

.hc-public label.hc-public-label,
label.hc-public-label {
  display: block;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hc-text-secondary);
  margin-bottom: 7px;
}

/* Required is carried by the asterisk glyph and the native required attribute,
   never by colour alone; the colour only has to be legible. */
.hc-public-label .hc-public-req {
  color: var(--hc-orange-action-deep);
  font-weight: 600;
}

.hc-public-hint {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--hc-text-secondary);
  margin-top: 6px;
}

/* ---- Controls ----------------------------------------------------------
   16px is deliberate: iOS zooms the viewport on focus for anything smaller,
   which on a phone reads as the page jumping. 44px is the touch minimum. */

.hc-public select,
.hc-public input[type="text"],
.hc-public input[type="email"],
.hc-public input[type="number"],
.hc-public input[type="tel"],
.hc-public input[type="date"],
.hc-public textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.45;
  border: 1px solid var(--hc-field-border);
  border-radius: 9px;
  background: var(--hc-raised);
  color: var(--hc-text-primary);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hc-public textarea { resize: vertical; min-height: 88px; }

.hc-public select:hover,
.hc-public input:hover,
.hc-public textarea:hover { border-color: var(--hc-text-secondary); }

/* The focus ring is an outline, not a border-colour change. Every page this
   sheet replaces set `outline: none` and recoloured the border instead, which
   leaves a keyboard reader with a 1px hue shift as their only indicator. */
.hc-public select:focus-visible,
.hc-public input:focus-visible,
.hc-public textarea:focus-visible,
.hc-public button:focus-visible {
  outline: 2px solid var(--hc-orange-action-deep);
  outline-offset: 2px;
  border-color: var(--hc-text-secondary);
}

/* Latin-shaped inputs stay LTR inside an RTL page: a phone number, a count and
   a date are not Arabic text. The label above them stays in reading order. */
html[dir="rtl"] .hc-public input[type="tel"],
html[dir="rtl"] .hc-public input[type="number"],
html[dir="rtl"] .hc-public input[type="date"],
html[dir="rtl"] .hc-public input[type="email"] { direction: ltr; text-align: start; }

/* ---- Checkboxes -------------------------------------------------------
   The whole label row is the hit target, comfortably past 24x24. */

.hc-public-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 16px;
  color: var(--hc-text-primary);
  cursor: pointer;
}

.hc-public-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 20px;
  accent-color: var(--hc-orange-action);
  cursor: pointer;
}

/* ---- Buttons ----------------------------------------------------------
   Accessible orange for the one primary action, subtle for everything
   tertiary. No near-black buttons: the family does not have them. */

.hc-public-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease,
              border-color 200ms ease, color 200ms ease;
}

.hc-public a.hc-public-btn { text-decoration: none; }

.hc-public .hc-public-btn-primary {
  background: linear-gradient(180deg, var(--hc-orange-action) 0%, var(--hc-orange-action-deep) 100%);
  color: var(--hc-card);
  box-shadow: 0 1px 2px rgba(42,37,32,0.16);
}

.hc-public .hc-public-btn-primary:hover {
  background: linear-gradient(180deg, var(--hc-accent-deep) 0%, color-mix(in srgb, var(--hc-accent-deep) 88%, #000) 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(174,70,22,0.5);
}

.hc-public .hc-public-btn-primary:disabled {
  background: var(--hc-text-disabled);
  box-shadow: none;
  transform: none;
  cursor: default;
}

.hc-public .hc-public-btn-quiet {
  background: transparent;
  color: var(--hc-text-primary);
  border-color: var(--hc-border-strong);
}

.hc-public .hc-public-btn-quiet:hover {
  border-color: var(--hc-text-secondary);
  background: rgba(42,37,32,0.03);
}

/* ---- Notices ----------------------------------------------------------
   A flashed server message. The tone is carried by an inline-start rule and
   the text colour, both of which survive a monochrome rendering. */

.hc-public-notice {
  padding: 12px 16px;
  border-radius: 9px;
  margin-bottom: 16px;
  font-size: 15px;
  line-height: 1.55;
  border-inline-start: 3px solid var(--hc-text-hush);
  background: var(--hc-raised);
  color: var(--hc-text-primary);
}

/* The three grounds are the ones the flash messages already used in
   templates/join_implementer.html; the inks are chosen for contrast on them
   rather than kept from that page, which set the info tone in secondary grey.
   Measured: danger 7.14:1, success 6.09:1, info 13.48:1. */
.hc-public-notice-danger {
  background: #F7E9E4;
  color: #8A2E14;
  border-inline-start-color: var(--hc-err);
}

.hc-public-notice-success {
  background: #E8F0E4;
  color: var(--hc-state-ok);
  border-inline-start-color: var(--hc-state-ok);
}

.hc-public-notice-info {
  background: #EEF2F5;
  color: var(--hc-text-primary);
  border-inline-start-color: var(--hc-navy);
}

@media (max-width: 720px) {
  .hc-public-form { padding: 24px 18px 22px; border-radius: 14px; }
  .hc-public-fieldset { font-size: 18px; }
  .hc-public-field-pair { grid-template-columns: 1fr; }
}

html[dir="rtl"] .hc-public-fieldset { letter-spacing: normal; }

/* ===== HC PUBLIC FORMS — END ====================================== */


/* ===== HC PUBLIC STATUS — START ===================================
   Added by UI-H1B for the private Household record and the two completion
   pages. A status here is a statement about what has been recorded, so the
   tones are deliberately few: in motion, waiting, and recorded.
   ================================================================== */

:root {
  /* The recorded tone is inherited unchanged from templates/household_public.html:
     6.98:1 on the card, 6.21:1 and 5.85:1 on the two tints it is used over.

     The waiting tone is inherited in ground but corrected in ink. Household pairs
     #B45309 with an 8% tint of itself, and while that ink clears AA on the bare
     card at 4.94:1, on its own tint it falls to 4.43:1 — under AA for the 14.5px
     badge and the 13.5px track pill that both use it. So the ground stays exactly
     as Household set it and the ink takes the deeper amber that
     templates/collective_subarea.html already uses, which measures 5.13:1 on that
     tint and 5.68:1 on the card. Same hue, same idiom, legible in both places. */
  --hc-state-ok: #1A6447;
  --hc-state-wait: #A14E00;
}

.hc-public-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
}

/* The dot repeats the tone, so the badge never depends on colour alone: the
   status word itself is always present next to it. */
.hc-public-status .hc-public-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }

.hc-public-status-live { background: rgba(26,100,71,0.08); color: var(--hc-state-ok); }
.hc-public-status-live .hc-public-dot { background: var(--hc-state-ok); }

.hc-public-status-wait { background: rgba(180,83,9,0.08); color: var(--hc-state-wait); }
.hc-public-status-wait .hc-public-dot { background: var(--hc-state-wait); }

.hc-public-status-done { background: rgba(26,100,71,0.12); color: var(--hc-state-ok); }
.hc-public-status-done .hc-public-dot { background: var(--hc-state-ok); }

/* A per-track pill, smaller than the page-level badge. */
.hc-public-tag {
  font-size: 13.5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 500;
  white-space: nowrap;
}

.hc-public-tag-ok { background: rgba(26,100,71,0.08); color: var(--hc-state-ok); }
.hc-public-tag-wait { background: rgba(180,83,9,0.08); color: var(--hc-state-wait); }
.hc-public-tag-idle { background: rgba(42,37,32,0.05); color: var(--hc-text-secondary); }

/* ---- Stat cards --------------------------------------------------------
   Three across or one, never two: a two-column track strands the third card
   alone at half width. */

.hc-public-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.hc-public-stat {
  background: var(--hc-card);
  border: 1px solid var(--hc-border);
  border-radius: 12px;
  box-shadow: var(--hc-shadow-card);
  padding: 18px;
}

.hc-public-stat-num {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--hc-navy);
}

.hc-public-stat-label { font-size: 14px; color: var(--hc-text-secondary); margin-top: 5px; }
.hc-public-stat-sub { font-size: 13.5px; color: var(--hc-text-secondary); margin-top: 3px; }

@media (max-width: 560px) {
  .hc-public-stats { grid-template-columns: 1fr; }
}

/* ---- Reached-steps trail ----------------------------------------------
   Only steps that have actually happened are listed, so the trail is a record
   and not a promise. The separator is a glyph in the markup, which is why no
   rule here generates one. */

.hc-public-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  font-size: 13.5px;
  color: var(--hc-text-secondary);
}

.hc-public-steps li { display: inline-flex; align-items: center; gap: 6px; }
.hc-public-step-now { color: var(--hc-text-primary); font-weight: 600; }
.hc-public-step-wait { color: var(--hc-state-wait); font-weight: 600; }

/* ---- Actions row and closing note ------------------------------------- */

.hc-public-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.hc-public-note {
  font-size: 15px;
  line-height: 1.6;
  color: var(--hc-text-secondary);
  margin-top: 28px;
  max-width: 62ch;
}

.hc-public-note a { border-bottom: 1px dotted var(--hc-border-strong); padding-block: 2px 3px; }

/* ===== HC PUBLIC STATUS — END ===================================== */


/* ===== HC PUBLIC PROSE — START ====================================
   Added by UI-H1B for About and Contact. These two are the only public pages
   whose job is reading rather than record display, so they keep an editorial
   measure and a real heading hierarchy instead of being flattened into a grid
   of identical cards.
   ================================================================== */

.hc-public-prose { max-width: 68ch; }

.hc-public-prose p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.68;
  color: var(--hc-text-primary);
}

.hc-public-prose p:last-child { margin-bottom: 0; }

.hc-public-prose strong { font-weight: 600; }

.hc-public-prose ul,
.hc-public-prose ol { margin: 0 0 18px; padding-inline-start: 22px; }

.hc-public-prose li {
  margin-bottom: 9px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--hc-text-primary);
}

/* A third-level step, below .hc-public-block-title. */
.hc-public-subhead {
  font-size: 18.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--hc-navy);
  margin: 28px 0 10px;
}

html[dir="rtl"] .hc-public-prose p,
html[dir="rtl"] .hc-public-prose li { line-height: 1.85; font-size: 16.5px; }

html[dir="rtl"] .hc-public-subhead { letter-spacing: normal; line-height: 1.5; }

@media (max-width: 720px) {
  .hc-public-prose p,
  .hc-public-prose li { font-size: 16.5px; }
}

/* ===== HC PUBLIC PROSE — END ====================================== */