npm - @govnepal/css - Versions diffs - 0.1.0 - Mend

@govnepal/css 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/LICENSE +21 -0
package/README.md +75 -0
package/dist/civic-calm.css +1127 -0
package/dist/fonts/noto-sans-devanagari-400.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-500.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-600.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-devanagari-400.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-devanagari-500.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-devanagari-600.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-latin-400.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-latin-500.woff2 +0 -0
package/dist/fonts/noto-sans-devanagari-latin-600.woff2 +0 -0
package/dist/fonts/noto-sans-latin-400.woff2 +0 -0
package/dist/fonts/noto-sans-latin-500.woff2 +0 -0
package/dist/fonts/noto-sans-latin-600.woff2 +0 -0
package/dist/fonts/noto-sans-mono-latin-400.woff2 +0 -0
package/dist/fonts/noto-serif-devanagari-devanagari-400.woff2 +0 -0
package/dist/fonts/noto-serif-devanagari-devanagari-600.woff2 +0 -0
package/dist/fonts/noto-serif-devanagari-latin-400.woff2 +0 -0
package/dist/fonts/noto-serif-devanagari-latin-600.woff2 +0 -0
package/dist/fonts/noto-serif-latin-400.woff2 +0 -0
package/dist/fonts/noto-serif-latin-600.woff2 +0 -0
package/dist/fonts.css +181 -0
package/package.json +47 -0

package/dist/civic-calm.css ADDED Viewed

@@ -0,0 +1,1127 @@
+/*!
+ * Civic Calm — @govnepal/css
+ * The framework-agnostic visual layer. Semantic HTML plus .gov-* classes; no JavaScript.
+ * Built against design-guidelines 0.2.0-dev (7af0babf).
+ *
+ * This stylesheet holds ALL of Civic Calm's visual decisions. @govnepal/ui adds only behavior
+ * (ARIA, keyboard, focus management) on top of these classes — so a plain-HTML site or a CMS
+ * gets the same interface without a JS framework, and a future Vue or Web Component port
+ * re-implements behavior only, never a design decision.
+ */
+/* GENERATED from data/grid.yaml and data/breakpoints.yaml — do not edit. */
+:root {
+  --gov-grid-columns: 12;
+  --gov-grid-gutter: 24px;
+  --gov-grid-max-width: 1200px;
+  --gov-grid-margin: 16px;
+}
+@media (min-width: 768px) {
+  :root { --gov-grid-margin: 24px; }
+}
+@media (min-width: 1024px) {
+  :root { --gov-grid-margin: 32px; }
+}
+/* Reset — the minimum needed to make the token layer predictable. Not a normalize.css: every
+ * rule here exists because a browser default would otherwise contradict a guideline. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+/* Browser default margins are the main reason teams reach for hardcoded spacing. Remove them so
+ * vertical rhythm comes from `stack` and nowhere else (components/stack.md). */
+body,
+h1, h2, h3, h4, h5, h6,
+p, figure, blockquote,
+dl, dd, ol, ul {
+  margin: 0;
+}
+ol, ul {
+  padding: 0;
+}
+/* Media never overflows its container — §4.1 requires zoom and responsive layout without
+ * clipping or overlap. */
+img, picture, video, canvas, svg {
+  display: block;
+  max-inline-size: 100%;
+}
+/* Form controls do not inherit typography by default; §5.3's 16px minimum applies to them too. */
+input, button, textarea, select {
+  font: inherit;
+  color: inherit;
+}
+/* A long citizenship number or Devanagari compound must wrap rather than force a horizontal
+ * scrollbar on a 360px phone. */
+p, h1, h2, h3, h4, h5, h6, li, td, th {
+  overflow-wrap: break-word;
+}
+/* Element defaults: semantic HTML should already look like Civic Calm before a single class is
+ * applied. That is what lets a CMS or a plain-HTML ministry site comply (§10.2's four-step
+ * quick start) without adopting a component library. */
+html {
+  /* Never disable zoom, and never lock text scaling (§4.1). */
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  background: var(--gov-color-background-default);
+  color: var(--gov-color-text-primary);
+  font-family: var(--gov-font-family-ui);
+  font-size: var(--gov-type-body-font-size);
+  font-weight: var(--gov-font-weight-regular);
+  line-height: var(--gov-type-body-line-height);
+  /* Weights below 400 are prohibited (§5.3), so synthetic bolding must never be relied on —
+   * and Devanagari must never be faux-bolded or faux-italicised at all. */
+  font-synthesis: none;
+}
+/* Devanagari renders denser than Latin at the same pixel size and needs the taller line (§5.3).
+ * This keys off `lang`, so a Nepali passage inside an English page gets the right leading
+ * without a class — the theme provider sets `lang` on <html>, but a `<p lang="ne">` works too. */
+:lang(ne) {
+  font-size: var(--gov-type-body-ne-font-size);
+  line-height: var(--gov-type-body-ne-line-height);
+}
+/* Never letter-space Devanagari: it breaks matra and conjunct joining (§5.3). The type scale
+ * defines no tracking tokens at all — the absence is the policy — so this is a backstop against
+ * a product stylesheet reintroducing it. */
+:lang(ne) {
+  letter-spacing: normal;
+}
+h1, h2, h3 {
+  font-weight: var(--gov-font-weight-semibold);
+  color: var(--gov-color-text-primary);
+}
+h1 {
+  font-size: var(--gov-type-h1-font-size);
+  line-height: var(--gov-type-h1-line-height);
+}
+h2 {
+  font-size: var(--gov-type-h2-font-size);
+  line-height: var(--gov-type-h2-line-height);
+}
+h3 {
+  font-size: var(--gov-type-h3-font-size);
+  line-height: var(--gov-type-h3-line-height);
+}
+small,
+.gov-text-small {
+  font-size: var(--gov-type-small-font-size);
+  line-height: var(--gov-type-small-line-height);
+}
+.gov-text-secondary {
+  color: var(--gov-color-text-secondary);
+}
+/* Reference and application numbers render monospaced so a citizen can transcribe them onto a
+ * form or read them down a phone without confusing similar glyphs (typography.json). */
+code, kbd, samp, pre,
+.gov-reference {
+  font-family: var(--gov-font-family-mono);
+}
+/* §5.3: Display and H1 step down on mobile. The type scale carries no responsive variants as
+ * tokens, so the two responsive sizes the guideline names in prose are implemented here.
+ * TODO(guidelines): these belong in a token overlay, so the checker can verify them. */
+@media (max-width: 767px) {
+  h1 {
+    font-size: 28px;
+    line-height: 36px;
+  }
+  .gov-display {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+.gov-display {
+  font-size: var(--gov-type-display-font-size);
+  line-height: var(--gov-type-display-line-height);
+  font-weight: var(--gov-font-weight-semibold);
+}
+/* Skip link — the first focusable element on every page (§7.2, §4.1). Visually hidden until
+ * focused; never display:none, which would remove it from the tab order and defeat the point. */
+.gov-skip-link {
+  position: absolute;
+  inset-inline-start: var(--gov-space-4);
+  inset-block-start: var(--gov-space-4);
+  z-index: var(--gov-z-sticky);
+  padding: var(--gov-space-3) var(--gov-space-4);
+  background: var(--gov-color-background-surface);
+  color: var(--gov-color-link-default);
+  font-weight: var(--gov-font-weight-semibold);
+  border-radius: var(--gov-radius-sm);
+  transform: translateY(-200%);
+}
+.gov-skip-link:focus {
+  transform: translateY(0);
+}
+/* Screen-reader-only text. Used for the error-summary count, chart table equivalents (§7.3.4),
+ * and icon labels — never to hide something a sighted user also needs. */
+.gov-visually-hidden {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+/* Focus (§5.2, normative).
+ *
+ * The double ring: `--gov-focus-ring-width` of `color.focus.ring` outside an equally-wide gap of
+ * `color.focus.offset`. It is drawn with box-shadow rather than `outline` + `outline-offset` for
+ * one specific reason: outline-offset leaves the element's OWN background showing in the gap, so
+ * on a primary button the gap would be blue-on-blue and the double ring would collapse into one
+ * thick edge. box-shadow lets the gap be an actual colour, which is what the spec requires when
+ * it says the ring must be "visible on any background including primary buttons and dark
+ * surfaces".
+ *
+ * High-contrast mode widens the ring to 3px; that comes from the token, not from a rule here. */
+:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 var(--gov-focus-ring-width) var(--gov-color-focus-offset),
+    0 0 0 calc(var(--gov-focus-ring-width) * 2) var(--gov-color-focus-ring);
+  /* The ring is drawn outside the element and must never be clipped by an ancestor's overflow,
+   * nor hidden behind a sticky header (§4.1's focus-visibility test). */
+  position: relative;
+  z-index: var(--gov-z-sticky);
+}
+/* Focus is never removed (§5.2). A product stylesheet that sets `outline: none` without a
+ * replacement is a checker error; this backstop means it at least degrades to a visible ring. */
+:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
+  outline: none;
+}
+/* The focus ring must appear instantly — motion.duration.instant (§5.5): "state changes that must
+ * not animate — error appearance, focus ring". */
+:where(a, button, input, select, textarea, summary, [tabindex]) {
+  transition-property: background-color, border-color, color;
+  transition-duration: var(--gov-motion-duration-fast);
+  transition-timing-function: var(--gov-motion-easing-standard);
+}
+/* Layout primitives (components/container.md, stack.md, page-section.md).
+ *
+ * These three are "the grid made installable": the only sanctioned way to set page width,
+ * vertical rhythm, and page bands, so spacing values never appear hardcoded in product code
+ * (§6.1.2). They carry no colour of their own except page-section's background variants. */
+/* --- Container: max width, responsive side margins, centred ------------------------------- */
+.gov-container {
+  inline-size: 100%;
+  max-inline-size: var(--gov-grid-max-width);
+  margin-inline: auto;
+  padding-inline: var(--gov-grid-margin);
+}
+/* Long-form reading and single-question form pages. The spec puts this at ~720px, which is the
+ * measure at which a line of body text stays comfortably readable (components/container.md). */
+.gov-container--narrow {
+  max-inline-size: 720px;
+}
+/* Only for edge-to-edge bands that contain their own container. */
+.gov-container--full-bleed {
+  max-inline-size: none;
+  padding-inline: 0;
+}
+/* --- Stack: vertical rhythm ---------------------------------------------------------------
+ * One stack with one gap, rather than per-element margins. `gap` accepts spacing token steps
+ * only — an arbitrary pixel value is a checker violation (components/stack.md). */
+.gov-stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-stack-gap, var(--gov-space-4));
+}
+.gov-stack--1 { --gov-stack-gap: var(--gov-space-1); }
+.gov-stack--2 { --gov-stack-gap: var(--gov-space-2); }
+.gov-stack--3 { --gov-stack-gap: var(--gov-space-3); }
+.gov-stack--4 { --gov-stack-gap: var(--gov-space-4); }
+.gov-stack--6 { --gov-stack-gap: var(--gov-space-6); }
+.gov-stack--8 { --gov-stack-gap: var(--gov-space-8); }
+/* --- Page section: a full-width band with contained content ------------------------------- */
+.gov-page-section {
+  padding-block: var(--gov-space-8);
+  background: var(--gov-color-background-default);
+}
+@media (min-width: 1024px) {
+  .gov-page-section {
+    padding-block: var(--gov-space-12);
+  }
+}
+/* Alternating bands give a landing page rhythm without decoration. Backgrounds come only from
+ * color.background.* — never a hue tint, because in Civic Calm a hue is always information
+ * (§5.2's colour hierarchy). */
+.gov-page-section--secondary-background {
+  background: var(--gov-color-background-secondary);
+}
+.gov-page-section--inverse {
+  background: var(--gov-color-background-inverse);
+  color: var(--gov-color-text-inverse);
+}
+/* Button rows and other horizontal clusters. Not a stack — stack is vertical only
+ * (components/stack.md's "when not to use"). Wraps rather than overflowing on a 360px screen. */
+.gov-cluster {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gov-space-3);
+}
+/* Button (components/button.md).
+ *
+ * "One primary button per view establishes the single next step" (§1.3, principle 1). The visual
+ * weight of the three variants is what makes that legible, so it is fixed here and not
+ * configurable per service. */
+.gov-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gov-space-2);
+  /* The hit area is 44×44 minimum regardless of visual size (components/button.md's Anatomy).
+   * --gov-target-min-size is NOT density-scaled, so the officer desktop's 0.875 multiplier can
+   * compact the padding without ever shrinking a control below the floor
+   * (data/density-rules.yaml: "48dp minimum touch targets survive every multiplier"). */
+  min-block-size: var(--gov-target-min-size);
+  padding-inline: var(--gov-space-4);
+  padding-block: var(--gov-space-3);
+  border: var(--gov-border-width-md) solid transparent;
+  border-radius: var(--gov-radius-sm);
+  font-family: var(--gov-font-family-ui);
+  font-size: var(--gov-type-body-font-size);
+  font-weight: var(--gov-font-weight-semibold);
+  line-height: var(--gov-type-body-line-height);
+  text-align: center;
+  text-decoration: none;
+  /* Citizens are trained by the consumer web; to a low-digital-literacy user the native-app
+   * "default cursor on buttons" reads as NOT clickable (§6.1.4, data/cursors.yaml). */
+  cursor: pointer;
+}
+/* Adjacent controls keep the minimum spacing between targets (data/quantified-standards.yaml)
+ * so a mistap on a phone does not trigger the wrong action. */
+.gov-button + .gov-button {
+  margin-inline-start: var(--gov-target-min-spacing);
+}
+/* --- Variants ---------------------------------------------------------------------------- */
+.gov-button--primary {
+  background: var(--gov-color-action-primary-default);
+  color: var(--gov-color-text-on-action);
+}
+.gov-button--primary:hover {
+  background: var(--gov-color-action-primary-hover);
+}
+.gov-button--primary:active {
+  background: var(--gov-color-action-primary-active);
+}
+.gov-button--secondary {
+  background: transparent;
+  color: var(--gov-color-action-secondary-text);
+  border-color: currentColor;
+}
+.gov-button--secondary:hover {
+  background: var(--gov-color-action-secondary-hover-background);
+}
+/* Always paired with a confirmation dialog (components/button.md) — the colour is a warning, not
+ * the safeguard. Its red is deliberately the FUNCTIONAL red, never Simrik: "the colour of the
+ * nation is never the colour of failure" (§2.1). */
+.gov-button--destructive {
+  background: var(--gov-color-action-destructive-default);
+  color: var(--gov-color-text-on-action);
+}
+.gov-button--destructive:hover {
+  background: var(--gov-color-action-destructive-hover);
+}
+.gov-button--destructive:active {
+  background: var(--gov-color-action-destructive-active);
+}
+/* --- Sizes -------------------------------------------------------------------------------- */
+/* sm is permitted only in dense officer tables (components/button.md's Platform notes). Even at
+ * sm the 44px hit-area floor holds — the padding shrinks, the target does not. */
+.gov-button--sm {
+  padding-inline: var(--gov-space-3);
+  font-size: var(--gov-type-small-font-size);
+}
+.gov-button--lg {
+  padding-inline: var(--gov-space-6);
+  padding-block: var(--gov-space-4);
+  font-size: var(--gov-type-body-large-font-size);
+}
+/* Kiosk: lg is the default and targets rise to the recommended 48px for stand-up use (§8.1.4). */
+[data-density="kiosk-counter"] .gov-button {
+  min-block-size: var(--gov-target-recommended-size);
+  font-size: var(--gov-type-body-large-font-size);
+}
+/* --- States ------------------------------------------------------------------------------- */
+/* aria-disabled is preferred over the `disabled` attribute (components/button.md): a disabled
+ * control that drops out of the tab order with no explanation is "a support-call generator", so
+ * it stays focusable and something else on the page says why. */
+.gov-button[disabled],
+.gov-button[aria-disabled="true"] {
+  background: var(--gov-color-action-primary-disabled-background);
+  color: var(--gov-color-action-primary-disabled-text);
+  border-color: transparent;
+  cursor: not-allowed;
+}
+/* Loading keeps the label ("Submitting…") and the button in the tab order; repeat activation is
+ * ignored in the behavior layer, not by removing the control. */
+.gov-button[aria-busy="true"] {
+  cursor: progress;
+}
+.gov-button__spinner {
+  inline-size: var(--gov-icon-size-md);
+  block-size: var(--gov-icon-size-md);
+  border: var(--gov-border-width-md) solid currentColor;
+  border-block-start-color: transparent;
+  border-radius: var(--gov-radius-full);
+  /* The one sanctioned continuous loop is a genuine indeterminate-progress indicator (§5.5).
+   * Under reduced-motion the duration token is 0ms, so this stops dead rather than spinning. */
+  animation: gov-spin var(--gov-motion-duration-slow) linear infinite;
+}
+@keyframes gov-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+/* Reduced motion collapses every duration to 0ms, which would leave the spinner frozen mid-turn.
+ * Remove the animation outright instead: the user still learns the button is busy from
+ * aria-busy and the "Submitting…" label — no information is carried by the motion (§5.5). */
+@media (prefers-reduced-motion: reduce) {
+  .gov-button__spinner {
+    animation: none;
+  }
+}
+[data-reduced-motion="true"] .gov-button__spinner {
+  animation: none;
+}
+/* Icons accompany labels; they never replace them for primary actions (§5.4). */
+.gov-button__icon {
+  inline-size: var(--gov-icon-size-md);
+  block-size: var(--gov-icon-size-md);
+  flex-shrink: 0;
+}
+/* Link (components/link.md).
+ *
+ * "If it is blue, it is interactive; if it is interactive, it is blue" (§5.2). Nothing decorative
+ * may be blue, which is why a link needs no other affordance — except the underline, below. */
+.gov-link,
+a {
+  color: var(--gov-color-link-default);
+  /* Underlined in body text, because a link may never be identified by colour alone (§4.1).
+   * This is the single most-broken accessibility rule on government sites, so it is the element
+   * default here rather than an opt-in class. */
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+a:hover,
+.gov-link:hover {
+  color: var(--gov-color-link-hover);
+  text-decoration-thickness: 2px;
+}
+/* Shown, not suppressed: a citizen working through a list of guidance pages can see what they
+ * have already read (components/link.md, Platform notes). */
+a:visited,
+.gov-link:visited {
+  color: var(--gov-color-link-visited);
+}
+/* Standalone links (not inside a paragraph) carry the same 44px minimum hit area as any other
+ * control. Inline links in running text are exempt — they are part of a text line. */
+.gov-link--standalone {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: var(--gov-target-min-size);
+}
+/* The "Back" affordance above a task-flow page's heading (components/link.md). */
+.gov-link--back {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+  min-block-size: var(--gov-target-min-size);
+}
+/* An external link is marked visibly, because §9.2's trust cues depend on a citizen knowing when
+ * they have left .gov.np — an unmarked jump off the domain is exactly what phishing exploits.
+ * The visible mark pairs with an accessible name in the behavior layer; neither alone is enough. */
+.gov-link--external::after {
+  content: "↗";
+  margin-inline-start: 0.25em;
+  /* Decorative glyph: the accessible name already says the link is external. */
+  speak: never;
+}
+/* A download link states format and size in its text so a citizen on metered mobile data can
+ * decide before spending it (§8.1.5). The stylesheet cannot enforce that; it only marks it. */
+.gov-link--download::after {
+  content: "↓";
+  margin-inline-start: 0.25em;
+}
+/* Text input (components/text-input.md).
+ *
+ * One question per row — the input IS the whole row (§7.1). Labels are always visible and stay
+ * visible after the user types; a placeholder is an example, never a label. */
+.gov-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-2);
+}
+.gov-field__label {
+  font-weight: var(--gov-font-weight-medium);
+  color: var(--gov-color-text-primary);
+}
+/* Helper text carries the format example for hard fields — "Enter the number exactly as shown on
+ * your certificate, e.g. 12-01-76-12345" (§7.1). It is bound with aria-describedby, not placed
+ * inside the label, so a screen reader announces the question first and the hint after. */
+.gov-field__hint {
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-small-font-size);
+  line-height: var(--gov-type-small-line-height);
+}
+.gov-input {
+  inline-size: 100%;
+  min-block-size: var(--gov-target-min-size);
+  padding: var(--gov-space-3);
+  background: var(--gov-color-background-surface);
+  color: var(--gov-color-text-primary);
+  /* ≥3:1 against both the field fill and the page (WCAG 1.4.11) — a field whose edge you cannot
+   * see is not a field. Verified for every display mode by the contrast gate. */
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  border-radius: var(--gov-radius-sm);
+}
+.gov-input::placeholder {
+  color: var(--gov-color-text-placeholder);
+  /* Placeholder is example-only. It must never be the label — the label stays visible above,
+   * because a placeholder disappears the moment the citizen starts typing (§7.1). */
+  opacity: 1;
+}
+/* Width hints content: a ward number is ~4ch wide, never full-width (components/text-input.md).
+ * A full-width input for a 2-digit field tells the citizen the wrong thing about what to enter. */
+.gov-input--width-2 { inline-size: 5ch; }
+.gov-input--width-4 { inline-size: 8ch; }
+.gov-input--width-10 { inline-size: 15ch; }
+.gov-input--width-20 { inline-size: 26ch; }
+/* readonly is the officer view: still focusable and still copyable (components/text-input.md).
+ * It is NOT disabled — an officer must be able to select the value and paste it elsewhere. */
+.gov-input[readonly] {
+  background: var(--gov-color-background-secondary);
+  border-color: var(--gov-color-border-default);
+}
+.gov-input[disabled] {
+  background: var(--gov-color-background-secondary);
+  color: var(--gov-color-text-disabled);
+  cursor: not-allowed;
+}
+/* Error state. The border thickens as well as changing colour, so the state is not carried by
+ * colour alone (§4.1) — and the message below says what to DO, never "Invalid input" (§3.1.3). */
+.gov-input[aria-invalid="true"] {
+  border-color: var(--gov-color-status-error-border);
+  border-width: var(--gov-border-width-md);
+}
+.gov-field--error .gov-field__label {
+  color: var(--gov-color-status-error-text);
+}
+.gov-field__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-2);
+  color: var(--gov-color-status-error-text);
+  font-weight: var(--gov-font-weight-medium);
+}
+.gov-field__error-icon {
+  inline-size: var(--gov-icon-size-md);
+  block-size: var(--gov-icon-size-md);
+  flex-shrink: 0;
+}
+/* Prefix/suffix — रु, +977 (components/text-input.md's `prefixed` variant). The affix sits
+ * outside the input so it is never mistaken for a typed value the citizen has to delete. */
+.gov-input-group {
+  display: flex;
+  align-items: stretch;
+}
+.gov-input-group__affix {
+  display: flex;
+  align-items: center;
+  padding-inline: var(--gov-space-3);
+  background: var(--gov-color-background-secondary);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  color: var(--gov-color-text-secondary);
+  white-space: nowrap;
+}
+.gov-input-group__affix:first-child {
+  border-start-start-radius: var(--gov-radius-sm);
+  border-end-start-radius: var(--gov-radius-sm);
+  border-inline-end: 0;
+}
+.gov-input-group__affix:last-child {
+  border-start-end-radius: var(--gov-radius-sm);
+  border-end-end-radius: var(--gov-radius-sm);
+  border-inline-start: 0;
+}
+.gov-input-group .gov-input {
+  border-radius: 0;
+}
+.gov-input-group .gov-input:first-child {
+  border-start-start-radius: var(--gov-radius-sm);
+  border-end-start-radius: var(--gov-radius-sm);
+}
+.gov-input-group .gov-input:last-child {
+  border-start-end-radius: var(--gov-radius-sm);
+  border-end-end-radius: var(--gov-radius-sm);
+}
+/* Masked variant: sensitive identity numbers are masked by default and revealed only by an
+ * explicit, permission-gated action (§9.1). The reveal control is a button, never a hover. */
+.gov-input--masked {
+  font-family: var(--gov-font-family-mono);
+  letter-spacing: 0.1em;
+}
+/* Error summary (components/error-summary.md).
+ *
+ * Mandatory on every form, on any failed validation (§7.1) — alongside the inline errors, never
+ * instead of them. Both renderings are built from the same validation result, so they can never
+ * disagree about what went wrong. */
+.gov-error-summary {
+  padding: var(--gov-space-4);
+  /* The thick edge (border.width.lg) is the same device the alert uses: the state is carried by
+   * shape as well as colour, so it survives high-contrast mode, where the tint is removed
+   * entirely and only border + icon + text remain (§5.2's "shape over tint"). */
+  border: var(--gov-border-width-lg) solid var(--gov-color-status-error-border);
+  border-radius: var(--gov-radius-md);
+  background: var(--gov-color-status-error-background);
+  color: var(--gov-color-text-primary);
+}
+/* Focus moves here on failed submit (tabindex="-1", role="alert"), so it must show a focus ring
+ * even though it is not otherwise interactive. */
+.gov-error-summary:focus-visible {
+  box-shadow:
+    0 0 0 var(--gov-focus-ring-width) var(--gov-color-focus-offset),
+    0 0 0 calc(var(--gov-focus-ring-width) * 2) var(--gov-color-focus-ring);
+}
+.gov-error-summary__title {
+  font-size: var(--gov-type-h3-font-size);
+  line-height: var(--gov-type-h3-line-height);
+  font-weight: var(--gov-font-weight-semibold);
+  color: var(--gov-color-status-error-text);
+  margin-block-end: var(--gov-space-3);
+}
+.gov-error-summary__list {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-2);
+}
+/* Each entry is a real link to the field's id. Activating it moves FOCUS to the input, not just
+ * the scroll position — a keyboard user who lands next to the field but not in it has to hunt
+ * for it (components/error-summary.md). */
+.gov-error-summary__link {
+  color: var(--gov-color-status-error-text);
+  font-weight: var(--gov-font-weight-medium);
+  text-decoration: underline;
+  min-block-size: var(--gov-target-min-size);
+  display: inline-flex;
+  align-items: center;
+}
+.gov-error-summary__link:hover,
+.gov-error-summary__link:visited {
+  color: var(--gov-color-status-error-text);
+}
+/* Alert (components/alert.md).
+ *
+ * Variant maps 1:1 to a color.status.* triple, so the display modes come for free: teal success
+ * in color-blind-safe, tint-free bordered boxes in high-contrast. Never construct an alert with
+ * custom colours. */
+.gov-alert {
+  display: flex;
+  gap: var(--gov-space-3);
+  padding: var(--gov-space-4);
+  border-radius: var(--gov-radius-md);
+  /* Thick leading edge in the status border colour. Together with the icon and the title text,
+   * this means the status is never carried by colour alone (§4.1) — and it is what survives
+   * high-contrast mode, where the background tint is removed entirely. */
+  border-inline-start: var(--gov-border-width-lg) solid;
+}
+.gov-alert__icon {
+  inline-size: var(--gov-icon-size-md);
+  block-size: var(--gov-icon-size-md);
+  flex-shrink: 0;
+  margin-block-start: 0.15em;
+}
+.gov-alert__title {
+  font-weight: var(--gov-font-weight-semibold);
+}
+/* Body states what happened AND what to do next, with the reference number (§3.1.3). */
+.gov-alert__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-2);
+}
+.gov-alert--info {
+  background: var(--gov-color-status-info-background);
+  border-color: var(--gov-color-status-info-border);
+  color: var(--gov-color-status-info-text);
+}
+.gov-alert--success {
+  background: var(--gov-color-status-success-background);
+  border-color: var(--gov-color-status-success-border);
+  color: var(--gov-color-status-success-text);
+}
+.gov-alert--warning {
+  background: var(--gov-color-status-warning-background);
+  border-color: var(--gov-color-status-warning-border);
+  color: var(--gov-color-status-warning-text);
+}
+.gov-alert--error {
+  background: var(--gov-color-status-error-background);
+  border-color: var(--gov-color-status-error-border);
+  color: var(--gov-color-status-error-text);
+}
+/* Emergency (§7.4's precedence rule).
+ *
+ * A public-safety notice from the authorized emergency-communication office. It MUST NOT read
+ * like "your application failed" (components/alert.md's alert-emergency-not-form-error): a
+ * citizen has to tell a national disaster alert apart from their own form mistake instantly.
+ *
+ * So it inverts rather than tints — a solid fill where every routine alert is a pale wash. That
+ * is a categorical difference in weight, not a different hue, so it introduces no new colour
+ * into a system where every hue already means exactly one thing (§5.2). It also outranks every
+ * other banner on the page, sitting closest to the government header, above the phase banner and
+ * the cookie banner. It never auto-dismisses and is never suppressed by cookie or notification
+ * preferences — public-safety information is not gated by consent (§9.1.2). */
+.gov-alert--emergency {
+  background: var(--gov-color-status-error-border);
+  border-color: var(--gov-color-status-error-text);
+  color: var(--gov-color-text-on-action);
+  border-inline-start-width: var(--gov-border-width-lg);
+  font-weight: var(--gov-font-weight-medium);
+}
+.gov-alert--emergency .gov-alert__title {
+  font-size: var(--gov-type-h3-font-size);
+  line-height: var(--gov-type-h3-line-height);
+}
+/* An emergency notice's links must stay legible on the solid fill. */
+.gov-alert--emergency a {
+  color: var(--gov-color-text-on-action);
+}
+/* Status badge (components/badge.md).
+ *
+ * Renders the official status taxonomy (data/status-taxonomy.yaml) — Draft, Submitted, Under
+ * review, Correction required, Approved, Rejected, Printed, Delivered — and nothing else. An
+ * ad-hoc status is not a styling problem; extend the taxonomy first (§7.3). */
+.gov-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gov-space-1);
+  padding-inline: var(--gov-space-2);
+  padding-block: var(--gov-space-1);
+  border-radius: var(--gov-radius-full);
+  border: var(--gov-border-width-sm) solid;
+  font-size: var(--gov-type-small-font-size);
+  line-height: var(--gov-type-small-line-height);
+  font-weight: var(--gov-font-weight-medium);
+  white-space: nowrap;
+}
+/* Badges are never clickable — filtering happens in the filter bar (components/badge.md). The
+ * default cursor is therefore correct here, and is the one place it is. */
+.gov-badge__icon {
+  inline-size: var(--gov-icon-size-sm);
+  block-size: var(--gov-icon-size-sm);
+  flex-shrink: 0;
+}
+/* The badge carries text + icon + colour, never colour alone (§4.1). The label is the taxonomy
+ * label, read aloud as words — no meaning lives in a title attribute. */
+.gov-badge--neutral {
+  background: var(--gov-color-status-neutral-background);
+  border-color: var(--gov-color-status-neutral-border);
+  color: var(--gov-color-status-neutral-text);
+}
+.gov-badge--info {
+  background: var(--gov-color-status-info-background);
+  border-color: var(--gov-color-status-info-border);
+  color: var(--gov-color-status-info-text);
+}
+.gov-badge--success {
+  background: var(--gov-color-status-success-background);
+  border-color: var(--gov-color-status-success-border);
+  color: var(--gov-color-status-success-text);
+}
+.gov-badge--warning {
+  background: var(--gov-color-status-warning-background);
+  border-color: var(--gov-color-status-warning-border);
+  color: var(--gov-color-status-warning-text);
+}
+.gov-badge--error {
+  background: var(--gov-color-status-error-background);
+  border-color: var(--gov-color-status-error-border);
+  color: var(--gov-color-status-error-text);
+}
+/* Government header (components/header.md, implementing identity/government-header).
+ *
+ * "The most-rendered identity surface in the whole system — every service, every page. It is
+ * deliberately boring: identical everywhere." There is no variant per ministry and no opt-out:
+ * a single header pattern is the citizen's primary cue that a site is genuinely governmental,
+ * and that only works if it is absolutely consistent (§9.2). Only the office name and service
+ * name change. */
+.gov-header {
+  background: var(--gov-color-background-surface);
+  /* The 4px Simrik top rule is the single permitted crimson identity accent on the page.
+   * color.identity.* is reserved for the state; it is never a status, never destructive, and
+   * never interactive decoration (§2.1, §5.2). */
+  border-block-start: var(--gov-border-width-lg) solid var(--gov-color-identity-crimson);
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+.gov-header__inner {
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-4);
+  padding-block: var(--gov-space-3);
+}
+.gov-header__lockup {
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-3);
+  /* The lockup as a whole is not a link target competing with the service name. */
+  text-decoration: none;
+  color: var(--gov-color-text-primary);
+  margin-inline-end: auto;
+}
+/* The emblem is loaded from the verified master in design-assets. It is NEVER drawn here — not
+ * as an inline SVG, not as a font glyph, not as an approximation. Recreating, recolouring, or
+ * tracing it is prohibited (identity/emblem), and an outdated or redrawn emblem is a legal error,
+ * not a style choice. The reversed variant is selected for dark surfaces by the behavior layer. */
+.gov-header__emblem {
+  block-size: 48px;
+  inline-size: auto;
+  flex-shrink: 0;
+}
+/* Dev-only: shown when no emblem asset has been supplied. It is deliberately ugly and says so.
+ * design-assets/emblems/files/ is currently EMPTY — no verified master exists yet — and the one
+ * thing this system must not do is invent a stand-in that looks plausible enough to ship. */
+.gov-header__emblem-missing {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: 48px;
+  inline-size: 48px;
+  flex-shrink: 0;
+  border: var(--gov-border-width-md) dashed var(--gov-color-status-error-border);
+  color: var(--gov-color-status-error-text);
+  font-size: var(--gov-type-caption-font-size);
+  line-height: 1.1;
+  text-align: center;
+  font-weight: var(--gov-font-weight-semibold);
+}
+/* Nepali first, English second — Article 7 makes Nepali in Devanagari the language of official
+ * business, and the header is where that is most visible (identity/government-header). */
+.gov-header__office {
+  display: flex;
+  flex-direction: column;
+}
+.gov-header__office-ne {
+  font-weight: var(--gov-font-weight-semibold);
+}
+.gov-header__office-en {
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-small-font-size);
+  line-height: var(--gov-type-small-line-height);
+}
+.gov-header__service {
+  font-size: var(--gov-type-h3-font-size);
+  line-height: var(--gov-type-h3-line-height);
+  font-weight: var(--gov-font-weight-semibold);
+}
+/* Language switcher: TEXT, never flags. Flags represent nations, not languages — Nepal's flag
+ * must not toggle English (identity/government-header). */
+.gov-header__language {
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+}
+.gov-header__language a {
+  min-block-size: var(--gov-target-min-size);
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--gov-space-2);
+}
+.gov-header__language [aria-current="true"] {
+  font-weight: var(--gov-font-weight-semibold);
+  color: var(--gov-color-text-primary);
+  text-decoration: none;
+}
+/* Mobile: condensed top bar — emblem + service name. Navigation moves to bottom-navigation
+ * (§7.2), so the header does not try to carry it (components/header.md's Platform notes). */
+@media (max-width: 767px) {
+  .gov-header__inner {
+    flex-wrap: wrap;
+    gap: var(--gov-space-2);
+  }
+  .gov-header__office-en {
+    display: none;
+  }
+}
+/* GENERATED from the light-mode token set — do not edit. See src/print.css. */
+@media print {
+  :root {
+    --gov-color-background-default: #F7F7F5;
+    --gov-color-background-surface: #FFFFFF;
+    --gov-color-background-secondary: #F1F1EF;
+    --gov-color-background-inverse: #1F1F1F;
+    --gov-color-text-primary: #1F1F1F;
+    --gov-color-text-secondary: #6B6B66;
+    --gov-color-text-placeholder: #6B6B66;
+    --gov-color-text-disabled: #C6C6BF;
+    --gov-color-text-inverse: #FFFFFF;
+    --gov-color-text-on-action: #FFFFFF;
+    --gov-color-border-default: #DEDED8;
+    --gov-color-border-input: #8F8F88;
+    --gov-color-border-strong: #6B6B66;
+    --gov-color-action-primary-default: #003893;
+    --gov-color-action-primary-hover: #002D76;
+    --gov-color-action-primary-active: #001F52;
+    --gov-color-action-primary-disabled-background: #E8E8E4;
+    --gov-color-action-primary-disabled-text: #8F8F88;
+    --gov-color-action-secondary-text: #003893;
+    --gov-color-action-secondary-hover-background: #E8EEF9;
+    --gov-color-action-destructive-default: #D4351C;
+    --gov-color-action-destructive-hover: #AA2A16;
+    --gov-color-action-destructive-active: #7F1F10;
+    --gov-color-link-default: #003893;
+    --gov-color-link-hover: #002D76;
+    --gov-color-link-visited: #5B3A8E;
+    --gov-color-focus-ring: #003893;
+    --gov-color-focus-offset: #FFFFFF;
+    --gov-color-identity-crimson: #C1121F;
+    --gov-color-identity-crimson-subtle: #FBE9EA;
+    --gov-color-identity-blue: #003893;
+    --gov-color-identity-gold: #D6A329;
+    --gov-color-selection-background: #D4E0F4;
+    --gov-color-interactive-hover-surface: #F1F1EF;
+    --gov-color-interactive-pressed-surface: #E8E8E4;
+    --gov-color-interactive-selected-background: #D4E0F4;
+    --gov-color-interactive-selected-indicator: #003893;
+    --gov-color-control-track: #E8E8E4;
+    --gov-color-control-indicator: #003893;
+    --gov-color-control-handle: #FFFFFF;
+    --gov-color-overlay-scrim: #171715B3;
+    --gov-color-overlay-hover: #1F1F1F14;
+    --gov-color-overlay-pressed: #1F1F1F29;
+    --gov-color-status-success-text: #00703C;
+    --gov-color-status-success-background: #E7F4EC;
+    --gov-color-status-success-border: #00703C;
+    --gov-color-status-warning-text: #7A4D05;
+    --gov-color-status-warning-background: #FDF3E1;
+    --gov-color-status-warning-border: #B25E09;
+    --gov-color-status-info-text: #003893;
+    --gov-color-status-info-background: #E8EEF9;
+    --gov-color-status-info-border: #003893;
+    --gov-color-status-error-text: #D4351C;
+    --gov-color-status-error-background: #FEF6F5;
+    --gov-color-status-error-border: #D4351C;
+    --gov-color-status-neutral-text: #6B6B66;
+    --gov-color-status-neutral-background: #F1F1EF;
+    --gov-color-status-neutral-border: #6B6B66;
+  }
+  body {
+    background: var(--gov-color-background-surface);
+    color: var(--gov-color-text-primary);
+  }
+}
+/* Print (§5.1.5, normative).
+ *
+ * Print is a first-class target, not an afterthought: officers print constantly (review packets,
+ * the print-receipt-certificate pattern) and citizens print confirmations — "the citizen usually
+ * leaves with paper" (§8.1.7).
+ *
+ * The colour half of this lives in the GENERATED print block above, which re-declares every
+ * semantic colour token at its light-mode value inside `@media print`. That is what makes "dark
+ * mode never prints dark" true: a `[data-mode="dark"]` override on :root would otherwise still
+ * be in force on paper. Print is a rendering target, not a seventh display mode, so it re-states
+ * the light values rather than becoming one — and it re-states them from the tokens, so there is
+ * still no hardcoded hex anywhere in this package.
+ *
+ * What follows is the structural half: what disappears, what must not break across a page, and
+ * what a citizen needs on paper that they did not need on screen. */
+@media print {
+  /* Chrome disappears; content, the reference number/QR code, and the government identity mark
+   * remain (§5.1.5). */
+  .gov-header__language,
+  .gov-skip-link,
+  nav,
+  .gov-button,
+  [data-print="hide"] {
+    display: none !important;
+  }
+  /* Shadows are an on-screen elevation device and print as grey mud. */
+  * {
+    box-shadow: none !important;
+  }
+  /* A citizen reading a printed page cannot click a link, so its URL prints beside it (§5.1.5).
+   * Only external/absolute links — printing "(#main)" next to a skip link helps nobody. */
+  a[href^="http"]::after {
+    content: " (" attr(href) ")";
+    font-size: var(--gov-type-caption-font-size);
+    word-break: break-all;
+  }
+  /* Page breaks never split a table row, a summary-list question/answer pair, or a signature
+   * block across two pages (§5.1.5). */
+  tr,
+  .gov-field,
+  .gov-alert,
+  .gov-error-summary,
+  [data-print="keep-together"] {
+    break-inside: avoid;
+  }
+  h1, h2, h3 {
+    break-after: avoid;
+  }
+  /* Status must not be carried by colour alone — and on a monochrome printer or a photocopy,
+   * colour is carried by nothing at all. The border and the label text are what survive
+   * (rules/status-not-color-alone.yaml applies to print, not only screen; identity/
+   * document-identity's print-fidelity rule says the same of generated certificates). */
+  .gov-badge,
+  .gov-alert,
+  .gov-error-summary {
+    border: var(--gov-border-width-sm) solid var(--gov-color-text-primary) !important;
+  }
+  /* Reference numbers stay legible in monochrome print and after a photocopy — the letterhead's
+   * monochrome-legible rule (identity/official-letterhead). */
+  .gov-reference {
+    font-family: var(--gov-font-family-mono);
+    font-weight: var(--gov-font-weight-semibold);
+  }
+}