/* Small single-purpose helpers, replacing the prototype's inline style="" attributes so the pages carry none. Names say what they do. */
.u-align-center { align-items: center; }
.u-align-self-center { align-self: center; }
.u-bg-surface-2 { background: var(--surface-2); }
.u-color-on-dark { color: var(--on-dark-band); }
.u-flex-0-0-auto { flex: 0 0 auto; }
.u-font-size-1-15rem { font-size: 1.15rem; }
.u-font-size-1-1rem { font-size: 1.1rem; }
.u-font-size-1-35rem { font-size: 1.35rem; }
.u-font-size-1-3rem { font-size: 1.3rem; }
.u-font-size-1-6rem { font-size: 1.6rem; }
.u-font-weight-500 { font-weight: 500; }
.u-grid-column-1-1 { grid-column: 1 / -1; }
.u-inline { display: inline; vertical-align: -.2em; margin-right: .5rem; }
.u-justify-center { justify-content: center; }
.u-list-style-none { list-style: none; }
.u-margin-0 { margin: 0; }
.u-margin-bottom-0 { margin-bottom: 0; }
.u-margin-bottom-0-25rem { margin-bottom: .25rem; }
.u-margin-bottom-0-6rem { margin-bottom: .6rem; }
.u-margin-bottom-0-75rem { margin-bottom: .75rem; }
.u-margin-bottom-var-s5 { margin-bottom: var(--s5); }
.u-margin-bottom-var-s6 { margin-bottom: var(--s6); }
.u-margin-right-0-5rem { margin-right: .5rem; }
.u-margin-top-0-5rem { margin-top: .5rem; }
.u-margin-top-0-75rem { margin-top: .75rem; }
.u-margin-top-1rem { margin-top: 1rem; }
.u-margin-top-2-5rem { margin-top: 2.5rem; }
.u-margin-top-2rem { margin-top: 2rem; }
.u-margin-top-var-s3 { margin-top: var(--s3); }
.u-margin-top-var-s4 { margin-top: var(--s4); }
.u-max-width-34ch { max-width: 34ch; }
.u-max-width-640px { max-width: 640px; }
.u-padding-0 { padding: 0; }
.u-padding-block-var-s5-var-s8 { padding-block: var(--s5) var(--s8); }
.u-padding-block-var-s6-var-s8 { padding-block: var(--s6) var(--s8); }
.u-padding-block-var-s7-var-s8 { padding-block: var(--s7) var(--s8); }
.u-padding-top-0 { padding-top: 0; }
.u-padding-top-var-s5 { padding-top: var(--s5); }
.u-shadow-2 { box-shadow: var(--shadow-2); }

/* things the server-rendered pages add to the prototype */
.sprite { position: absolute; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* honeypot: people never see or tab to it */
.notice { background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius-sm); padding: var(--s3) var(--s4); margin: var(--s4) 0; }
.cookie-notice { position: fixed; left: var(--s3); right: var(--s3); bottom: var(--s3); z-index: 60; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: var(--s3) var(--s4); box-shadow: var(--shadow-2); max-width: 720px; margin-inline: auto; }
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; flex: 1 1 18rem; font-size: .9rem; }
.cookie-short { display: none; }
/* The notice never sits over the page's own content or a focused control (10 Nov, the QA lead's phone walk): site.js writes its height into
   --cookie-h, the page keeps that much room at the foot, what scrolls into view stops above it, and a focused field or button moves it away. */
html { scroll-padding-bottom: var(--cookie-h, 0px); }
body { padding-bottom: var(--cookie-h, 0px); }
.cookie-notice.is-away { visibility: hidden; transform: translateY(110%); }
@media (max-width: 639px) {
  .cookie-notice { left: 0; right: 0; bottom: 0; max-width: none; margin: 0; border-radius: 0; border-width: 1px 0 0; padding: .4rem var(--s3); gap: var(--s2);
    flex-wrap: nowrap; box-shadow: 0 -2px 8px rgb(0 0 0 / .08); }
  .cookie-notice p { flex: 1 1 auto; font-size: .78rem; line-height: 1.35; }
  .cookie-long { display: none; }
  .cookie-short { display: inline; }
  .cookie-notice .btn { flex: none; padding: .3rem .8rem; }
}
.lang-switch { font-weight: 600; font-size: .95rem; text-decoration: none; min-width: 44px; justify-content: center; display: inline-flex; align-items: center; }
html[lang="hi"] body { font-family: var(--font-hindi); line-height: 1.7; }
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4 { font-family: var(--font-hindi); letter-spacing: 0; line-height: 1.35; }