/* NUGEQ Member Portal. Colours follow the NUGEQ palette (brand/nugeq-palette.md): navy for headings and the menu bar,
   steel blue for links and buttons, sky blue and leaf green as accents, forest green for success. The palette has no
   greys, so the ink, paper and rule colours are neutral. Type follows the brand kit (brand/README.md): Montserrat
   (700, 800) for headings, which matches the NUGEQ wordmark, and Ubuntu (400, 500, 700) for text, which matches the
   descriptor line; self-hosted from /static/fonts/ (the files are Latin subsets, so characters such as the Greek
   letters, >= and the arrows come from the next font in the stack), with their licenses beside them.
   The brand defines no signal colours, so these are functional: amber marks controlled content, red marks errors and
   destructive actions.
   Contrast (WCAG 2.1 AA): navy is 14.6:1 on white; steel blue #1d6fb0 is 5.3:1 on white and 4.8:1 on paper, which is
   why it is the link and button colour; sky blue (3.9:1) and leaf green (3.5:1) are for rules and large or
   decorative use only, never for text; muted #5b6168 is 5.6:1 on paper.
   No inline style or script is used anywhere: the content security policy forbids both. */

@font-face { font-family: Montserrat; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-700.1c0792ac34ef.woff2") format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/montserrat-800.9e624ca74fb3.woff2") format("woff2"); }
@font-face { font-family: Ubuntu; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ubuntu-400.4a8b9af22b31.woff2") format("woff2"); }
@font-face { font-family: Ubuntu; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ubuntu-500.c6bd3f0bf07f.woff2") format("woff2"); }
@font-face { font-family: Ubuntu; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/ubuntu-700.9418887ae687.woff2") format("woff2"); }

:root {
  /* The brand palette */
  --navy: #032a4c; --steel: #1d6fb0; --sky: #2986c9; --leaf: #4c9b27; --forest: #237424; --deep-green: #004a09;
  /* Neutrals the palette does not define */
  --ink: #1d1f20; --paper: #f2f2f3; --white: #fff;
  /* Derived from the palette: a darker blue for hover, a pale wash for selected rows, cool greys for rules */
  --accent: var(--steel); --accent-deep: #0b4577; --accent-tint: #e6f0f9; --on-navy: #bcdcf3;  /* sky blue at 25%: 10.2:1 on navy */
  --ink-soft: #33383c; --muted: #5b6168;
  --rule: #d2d7dc; --rule-soft: #e4e8ec;
  /* Functional colours, not part of the brand */
  --danger: #a12b24; --danger-deep: #7d1f1a; --danger-tint: #fbeceb; --danger-border: #e3b9b5; --danger-wash: #fffafa;
  --amber: #9a6700; --amber-tint: #fff3cd; --amber-ink: #4a3300;
  --green: var(--forest); --green-tint: #eaf5ea;
  --font-display: Montserrat, system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-sans: Ubuntu, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 6px;
  --shadow: 0 1px 2px rgba(3, 42, 76, .06), 0 6px 20px rgba(3, 42, 76, .10);
  /* Names the application stylesheets already use */
  --line: var(--rule); --bg: var(--paper); --warn: var(--danger-deep);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font: 18px/1.55 var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }

/* Type ---------------------------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--navy); line-height: 1.2; }
h1 { font-weight: 800; }
h1 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.25rem); margin: 0 0 .6em; padding-bottom: .35em; border-bottom: 3px solid var(--leaf); }
h2 { font-size: 1.35rem; margin: 1.8em 0 .5em; }
h3 { font-size: 1.15rem; margin: 1.4em 0 .4em; }
h4 { font-size: 1rem; margin: 1.2em 0 .3em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: .15em; }
a:hover { color: var(--accent-deep); }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6em 0; }
mark { background: #fff2a8; color: var(--ink); padding: 0 .1em; }
code, kbd, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; }
.muted { color: var(--muted); }
.meta { color: var(--muted); margin-left: 8px; font-size: .9rem; }
.error { color: var(--danger-deep); font-weight: 500; }
.intro { color: var(--ink-soft); }

/* Focus is always visible: a dark ring on light surfaces, a white ring on dark ones */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.site-nav :focus-visible, .main-nav :focus-visible, .button:focus-visible { outline-color: var(--ink); }
.main-nav :focus-visible { outline-color: var(--white); }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; background: var(--white); color: var(--ink); padding: 8px 12px; z-index: 50; border-radius: var(--radius); box-shadow: var(--shadow); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header --------------------------------------------------------------------------------------------- */
/* The green rule under the header repeats the rule under the wordmark in the logo */
.site-header { background: var(--white); border-bottom: 4px solid var(--leaf); }
.header-inner { max-width: 1400px; margin: 0 auto; padding: 10px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand-logo { display: block; line-height: 0; flex: none; }
/* The horizontal logo is 66px tall, which makes it 205px wide: the kit's minimum for it is 200px, below that it asks for the icon */
.brand-logo img { display: block; height: 66px; width: auto; max-width: 100%; }
/* The RWA logo is a raster file 406 x 375; it is shown at the NUGEQ logo's height so the two have equal prominence (SRS-UI-005) */
.brand-rwa { display: block; height: 66px; width: auto; flex: none; }
.brand-sep { width: 2px; height: 40px; background: var(--steel); }
.header-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.search { display: flex; gap: 6px; margin: 0; }
.search input[type=search] { min-width: 15rem; }
.user-bar { display: flex; align-items: center; gap: 14px; }
.user-name { font-weight: 500; }
.inline { display: inline; margin: 0; }

/* Main menu ------------------------------------------------------------------------------------------ */
.main-nav { background: var(--navy); color: var(--white); position: relative; z-index: 20; }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 17px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; flex: 1 1 auto; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-link { display: inline-flex; align-items: center; gap: 5px; padding: 13px 7px; color: var(--white); text-decoration: none; font: 500 .95rem/1.2 var(--font-sans); background: none; border: 0; border-radius: 0; cursor: pointer; letter-spacing: .01em; }
span.nav-link { cursor: default; }
.nav-item > a.nav-link:hover, .nav-item > button.nav-link:hover, .nav-item.open > .nav-link { background: var(--accent); color: var(--white); }
.nav-label::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.1em) rotate(45deg); }
.nav-toggle { width: 22px; margin-left: -6px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--white); border-radius: 0; display: inline-flex; align-items: center; justify-content: center; }
.nav-toggle::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.1em) rotate(45deg); }
.nav-toggle:hover, .nav-item.open > .nav-toggle { background: var(--accent); }
.nav-sub { list-style: none; margin: 0; padding: 8px 0; position: absolute; top: 100%; left: 0; min-width: 17rem; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--accent); box-shadow: var(--shadow); display: none; z-index: 30; }
.nav-item.open > .nav-sub { display: block; }
.nav-sub a { display: block; padding: 8px 18px; color: var(--ink); text-decoration: none; font-size: .95rem; }
.nav-sub a:hover { background: var(--accent-tint); color: var(--accent-deep); }
.nav-sub :focus-visible { outline-color: var(--ink); outline-offset: -3px; }
.menu-button { display: none; }
/* The second bar: a person's own tools and administration */
.nav-utility { background: var(--rule-soft); border-bottom: 1px solid var(--rule); }
.nav-utility .nav-list { justify-content: flex-end; }
.nav-utility .nav-link { color: var(--ink); font-size: .84rem; padding: 8px 10px; }
.nav-utility .nav-toggle { color: var(--ink); }
.nav-utility .nav-item > a.nav-link:hover, .nav-utility .nav-item > button.nav-link:hover, .nav-utility .nav-item.open > .nav-link,
.nav-utility .nav-toggle:hover, .nav-utility .nav-item.open > .nav-toggle { background: var(--accent); color: var(--white); }
.nav-utility .nav-sub { left: auto; right: 0; max-height: calc(100vh - 10rem); overflow-y: auto; }
.nav-utility :focus-visible { outline-color: var(--ink); }

/* Without the script every section is shown open, so nothing depends on it */
html:not(.js) .nav-sub { position: static; display: block; box-shadow: none; border: 0; background: transparent; padding: 0 0 8px 12px; }
html:not(.js) .nav-sub a { color: var(--white); padding: 4px 0; }
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav-item { flex-direction: column; }
html:not(.js) .nav-list { gap: 0 24px; }

@media (max-width: 60em) {
  .nav-inner { padding: 0 16px; gap: 0; }
  .menu-button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 14px 0; font-size: 1rem; }
  .menu-button::after { content: ""; float: right; width: .55em; height: .55em; margin-top: .3em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  html.js .nav-list { display: none; }
  html.js .main-nav.menu-open .nav-list { display: block; width: 100%; padding-bottom: 8px; }
  .nav-utility { background: var(--navy); border: 0; }
  .nav-utility .nav-link, .nav-utility .nav-toggle { color: var(--white); font-size: .88rem; padding: 12px 0; }
  .nav-utility .nav-toggle { padding: 0; }
  .nav-utility :focus-visible { outline-color: var(--white); }
  .nav-utility .nav-inner { justify-content: flex-start; }
  .nav-utility .nav-sub { right: auto; max-height: none; overflow: visible; }
  .nav-item { display: block; border-top: 1px solid rgba(255, 255, 255, .15); }
  .nav-link { width: 100%; padding: 12px 0; }
  .nav-label { justify-content: space-between; }
  .nav-item.has-sub { display: flex; flex-wrap: wrap; }
  .nav-item.has-sub > .nav-link { flex: 1 1 0; width: auto; }
  .nav-sub { position: static; display: none; width: 100%; box-shadow: none; border: 0; background: rgba(255, 255, 255, .08); padding: 4px 0 8px; }
  .nav-sub a { color: var(--white); padding: 9px 16px; }
  .nav-sub a:hover { background: var(--accent); color: var(--white); }
  .nav-toggle { width: 44px; margin-left: 0; }
}

/* Page ----------------------------------------------------------------------------------------------- */
main { flex: 1 0 auto; width: 100%; max-width: 1180px; margin: 0 auto; padding: 36px 24px 56px; overflow-wrap: anywhere; }
main.narrow { flex: 0 0 auto; max-width: 34rem; margin: 40px auto; padding: 28px 32px 32px; background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: var(--radius); box-shadow: var(--shadow); }
main.narrow button[type=submit] { margin-right: 14px; }
main.narrow h1 { border-bottom: 0; padding-bottom: 0; font-size: 1.5rem; }
main.narrow input[type=email], main.narrow input[type=password], main.narrow input[type=text] { width: 100%; }
main table { overflow-wrap: normal; }  /* SRS-UI-001: a long address or word wraps instead of widening the page */
.site-footer { margin-top: auto; background: var(--white); border-top: 1px solid var(--rule); color: var(--muted); font-size: .9rem; }
.footer-inner { max-width: 1400px; margin: 0 auto; padding: 18px 24px; }
.footer-inner p { margin: 0 0 .3em; }
.footer-inner .credit { font-size: .85rem; }
.legend { font-weight: 500; color: var(--ink); }

/* Lists and cards ------------------------------------------------------------------------------------- */
.item-list, .results { list-style: none; padding: 0; margin: 1em 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); }
.item-list li, .results li { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); }
.item-list li:last-child, .results li:last-child { border-bottom: 0; }
.item-list li a, .results li h3 a { font-weight: 500; text-decoration-thickness: 1px; }
.results li h3 { margin: 0 0 .2em; font-family: var(--font-sans); font-size: 1.05rem; }
.badge { display: inline-block; background: var(--amber-tint); color: var(--amber-ink); border: 1px solid var(--amber); padding: 0 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-left: 8px; vertical-align: .1em; }
.badge-new { background: var(--green-tint); color: var(--ink); border-color: var(--green); }
.export-notice { background: var(--amber-tint); color: var(--amber-ink); border: 1px solid var(--amber); border-left: 6px solid var(--amber); padding: 12px 16px; border-radius: var(--radius); }
.concern-notice { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.concern-notice .concern-link { margin-left: 6px; }
.concern-link { font-size: .85rem; margin-left: 8px; }
.concern-form .check { margin: 4px 0; }
.facts dt { font-weight: 500; float: left; clear: left; width: 11em; color: var(--muted); }
.facts dd { margin: 0 0 6px 11em; }
.sort, .pager { color: var(--muted); font-size: .95rem; }
.sort a, .pager a { font-weight: 500; }
.pager { display: flex; gap: 16px; align-items: center; margin: 1.4em 0; }
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 1em 0; }
.tag-filter a { padding: 2px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--white); text-decoration: none; font-size: .9rem; }
.tag-filter a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--white); }

/* Messages ------------------------------------------------------------------------------------------- */
.messages { list-style: none; padding: 0; margin: 0 0 1.4em; }
.messages li, .messages > div, [role=alert].box, [role=status].box { padding: 12px 16px; margin: 0 0 8px; background: var(--white); border: 1px solid var(--rule); border-left: 6px solid var(--muted); border-radius: var(--radius); }
.messages .success { border-left-color: var(--green); background: var(--green-tint); }
.messages .error, .messages .warning { border-left-color: var(--danger); background: var(--danger-tint); color: var(--ink); font-weight: 400; }
/* The announcement banner (notices.models.SiteNotice) and the line for a user with no membership tier. */
.site-announcement > div { border-left-color: var(--accent); }
.site-announcement p, .no-tier-notice p { margin: 0 0 .5em; }
.site-announcement p:last-child, .no-tier-notice p:last-child { margin-bottom: 0; }

/* Forms ---------------------------------------------------------------------------------------------- */
label { font-weight: 500; }
input, select, textarea, button { font: inherit; }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local], select, textarea {
  padding: 8px 10px; border: 1px solid #8a8a84; border-radius: 4px; background: var(--white); color: var(--ink); max-width: 100%;
}
input[type=email], input[type=password], input[type=search], input[type=text], input[type=url] { min-width: 16em; }
textarea { width: 100%; min-height: 8rem; }
input[type=file] { width: 100%; max-width: 100%; font-size: .95rem; }
select { padding-right: 28px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ink); }
fieldset { min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--white); padding: 14px 18px; margin: 0 0 1.2em; }
legend { font-weight: 700; padding: 0 6px; }
.helptext, .help-text, small { color: var(--muted); font-size: .9rem; }
form p, form .field { margin: 0 0 1em; }
.errorlist { list-style: none; margin: 0 0 6px; padding: 0; color: var(--danger-deep); font-weight: 500; }

/* Buttons -------------------------------------------------------------------------------------------- */
.button, button { background: var(--accent); color: var(--white); border: 1px solid var(--accent); padding: 8px 16px; border-radius: 4px; text-decoration: none; cursor: pointer; display: inline-block; font-weight: 500; line-height: 1.4; }
.button:hover, button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--white); }
.button-quiet, .button.secondary { background: var(--white); color: var(--ink); border: 1px solid #8a8a84; }
.button-quiet:hover, .button.secondary:hover { background: var(--rule-soft); border-color: var(--ink); color: var(--ink); }
button:disabled, .button[aria-disabled=true] { opacity: .55; cursor: not-allowed; }

/* Tables --------------------------------------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); }
caption { text-align: left; padding: 8px 2px; color: var(--muted); font-size: .92rem; caption-side: top; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
thead th { background: var(--rule-soft); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
tbody tr:hover { background: #f6f8fa; }

@media (max-width: 60em) {
  .header-tools { width: 100%; justify-content: space-between; gap: 12px; }
  .search { flex: 1 1 14rem; min-width: 0; }
  .search input[type=search] { flex: 1 1 0; min-width: 0; width: 0; }
}
@media (max-width: 600px) {
  main { padding: 24px 16px 40px; }
  main.narrow { margin: 16px; width: auto; padding: 20px 18px 24px; }
  .header-inner { padding: 12px 16px; }
  /* both logos keep their 66px height on a phone: 205px + 10px + 71px fits a 320px screen with its 16px margins */
  .brand { gap: 10px; flex-wrap: nowrap; }
  .brand-sep { display: none; }
  .facts dt { float: none; width: auto; }
  .facts dd { margin-left: 0; }
  .footer-inner { padding: 16px; }
}

/* Public landing page (templates/home/landing.html) --------------------------------------------------- */
main.landing { max-width: none; padding: 0; }
.landing-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.hero { background: var(--navy); color: var(--white); padding: 56px 0 60px; border-bottom: 4px solid var(--leaf); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
.hero-emblem { display: block; width: 300px; height: auto; }
.hero-kicker { margin: 0 0 14px; font: 700 .85rem/1.3 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy); }
.hero h1 { color: var(--white); border: 0; padding: 0; margin: 0 0 .45em; max-width: 24ch; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.2rem); font-weight: 800; }
.hero-lead { max-width: 46rem; font-size: 1.2rem; }
.hero-lead a { color: var(--white); }
.hero-lead p:last-child { margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 0; }
.button-on-dark, .button-on-dark:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.button-on-dark:hover { background: var(--accent-tint); border-color: var(--accent-tint); }
.button-outline { display: inline-block; padding: 8px 16px; border: 2px solid var(--white); border-radius: 4px; color: var(--white); text-decoration: none; font-weight: 500; }
.button-outline:hover { background: var(--white); color: var(--navy); }
.hero :focus-visible { outline-color: var(--white); }
.landing-section { padding: 48px 0 0; }
.landing-section h2 { margin: 0 0 .5em; font-size: 1.6rem; }
.section-intro { max-width: 46rem; color: var(--ink-soft); }
.prose { max-width: 46rem; }
.card-grid { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.card { background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 .4em; font-size: 1.05rem; }
.card p { margin: 0; color: var(--ink-soft); }
.join-band { margin-top: 56px; padding: 44px 0 52px; background: var(--accent-tint); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.join-band h2 { margin: 0 0 .5em; font-size: 1.6rem; }
.join-contact { font-size: 1.1rem; font-weight: 500; }
.join-login { margin-bottom: 0; }
@media (max-width: 60em) {
  .hero-grid { display: block; }
  .hero-emblem { display: none; }  /* decorative: the logos are already in the header */
}
@media (max-width: 600px) {
  .landing-inner { padding: 0 16px; }
  .hero { padding: 36px 0 40px; }
  .hero-lead { font-size: 1.05rem; }
  .landing-section { padding-top: 36px; }
  .join-band { margin-top: 40px; padding: 32px 0 36px; }
}

/* notices (R6): footer links, staff-editable notices, and the information pages (templates/notices/) -------- */
.footer-links ul { list-style: none; margin: .4em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-links li { margin: 0; }
.site-notice { background: var(--white); border: 1px solid var(--rule); border-left: 6px solid var(--accent); padding: 12px 16px; border-radius: var(--radius); margin: 1em 0; max-width: 46rem; }
.site-notice p { margin: 0 0 .5em; }
.site-notice p:last-child { margin-bottom: 0; }
.site-notice h2, .site-notice h3 { font-size: 1.05rem; margin: 0 0 .4em; padding: 0; border: 0; }
.login-notice { margin-top: 1.4em; font-size: .9rem; }
.login-notice .site-notice { margin: 0 0 .6em; }
.info-updated { color: var(--muted); margin: 0; }
.cookie-table { max-width: 60rem; margin: 1em 0; }
.cookie-table code { overflow-wrap: anywhere; }

/* The floating chat button (SRS-CHT-023, templates/chat/_button.html): bottom right, clear of the phone's safe
   areas, under the menu's drop-downs. The footer gets room below its text so the button never hides it. White on
   navy is 14.6:1; the state text (sky blue at 25%) is 10.2:1. The dot only repeats the state, which is in words. */
.chat-fab { position: fixed; z-index: 15; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px 18px;
  background: var(--navy); color: var(--white); font: 500 1rem/1.25 var(--font-sans); white-space: nowrap; text-decoration: none;
  border: 2px solid var(--white); border-radius: 999px; box-shadow: var(--shadow); transition: background-color .15s ease; }
.chat-fab:hover { background: var(--accent-deep); color: var(--white); text-decoration: underline; }
.chat-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 999px; box-shadow: 0 0 0 7px var(--white); }  /* ink between white rings: seen on any background */
.chat-fab-state { color: var(--on-navy); font-weight: 400; }
.chat-fab-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--on-navy); box-sizing: border-box; }
.chat-fab-dot-on { background: var(--leaf); border-color: var(--leaf); }
.chat-fab-count { min-width: 1.6em; padding: 0 6px; box-sizing: border-box; background: var(--white); color: var(--navy); border-radius: 999px; font-weight: 700; text-align: center; }
.has-chat-fab .site-footer { padding-bottom: calc(3rem + 32px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: reduce) { .chat-fab { transition: none; } }
@media (forced-colors: active) { .chat-fab { border-color: ButtonText; } }
@media print { .chat-fab { display: none; } .has-chat-fab .site-footer { padding-bottom: 0; } }

/* Live chat: what the chat pages (chat/static/chat/chat.css has the rest) and the chat panel share: the state, the
   notice, the transcript, and the forms. Message text keeps its line breaks (white-space: pre-wrap) and is plain
   text. */
.cht-chip { display: inline-block; padding: 0 9px; border: 1px solid var(--rule); border-radius: 999px; font: 600 .72rem/1.7 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: .08em; }
.cht-chip-on { background: var(--green-tint); border-color: var(--green); color: #14501a; }
.cht-chip-off { background: var(--rule-soft); color: var(--ink-soft); }

.cht-availability, .cht-note { max-width: 46rem; }
.cht-availability { margin: 0 0 1.4em; padding: 12px 16px; background: var(--white); border: 1px solid var(--rule); border-left: 6px solid var(--muted); border-radius: var(--radius); }
.cht-availability.cht-online { border-left-color: var(--green); }
.cht-availability p { margin: 0 0 .4em; }
.cht-availability p:last-child { margin-bottom: 0; }
.cht-hours { color: var(--ink-soft); font-size: .95rem; }
.cht-note { margin: 0 0 1.3em; padding: 12px 16px; background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--muted); border-radius: var(--radius); color: var(--ink-soft); font-size: .95rem; }

.cht-chat { max-width: 46rem; }
.cht-status { margin: 0 0 .3em; font-weight: 600; color: var(--navy); }
.cht-connection { margin: 0 0 1em; color: var(--muted); font-size: .9rem; }
.cht-log-list { list-style: none; margin: 0; padding: 0; }
.cht-log { margin: 0 0 1.2em; padding: 12px; max-height: 32rem; overflow-y: auto; background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); }
.cht-entry { margin: 0 0 10px; padding: 8px 12px; border-radius: var(--radius); background: var(--paper); border-left: 4px solid var(--rule); }
.cht-entry:last-child { margin-bottom: 0; }
.cht-entry.cht-staff { background: var(--accent-tint); border-left-color: var(--accent); }
.cht-entry.cht-own { border-left-color: var(--navy); }
.cht-entry.cht-system { background: none; border-left: 0; padding: 4px 12px; color: var(--muted); font-size: .9rem; }
/* SRS-CHT-021: a staff-only note, on the staff page only; marked by a dashed border as well as its label. */
.cht-entry.cht-note { max-width: none; margin: 0 0 10px; padding: 8px 12px; background: var(--amber-tint); border: 1px dashed var(--amber); border-left: 4px dashed var(--amber); color: var(--ink); font-size: 1rem; }
.cht-meta { margin: 0 0 2px; font-size: .86rem; color: var(--muted); }
.cht-author { font-weight: 600; color: var(--ink); }
.cht-entry.cht-system .cht-author { color: var(--muted); }
.cht-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cht-file { margin: 4px 0 0; overflow-wrap: anywhere; }

.cht-form { margin: 0 0 1em; }
.cht-form label { display: block; margin-bottom: 4px; font-weight: 600; }
.cht-form .helptext { margin: 0 0 6px; font-size: .9rem; color: var(--muted); }
.cht-form textarea, .cht-form input[type=text], .cht-form input[type=date] { width: 100%; }
.cht-form textarea[aria-invalid=true] { border: 2px solid var(--danger-deep); }
.cht-form input[type=file] { width: 100%; padding: 10px; border: 1px dashed #8a8a84; border-radius: var(--radius); background: var(--paper); }
.cht-form .field { margin: 0 0 12px; }
.cht-form .form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 12px; }
.cht-pickup, .cht-close { margin: 0 0 1em; }
.cht-people { margin: 0 0 .3em; color: var(--ink-soft); }

@media (max-width: 600px) {
  .cht-log { max-height: 24rem; padding: 8px; }
}

/* SRS-CHT-007: the notice not to include export-controlled information. */
.cht-notice { max-width: 46rem; margin: 0 0 1.3em; padding: 12px 16px; background: var(--amber-tint); border: 1px solid var(--amber); border-left: 6px solid var(--amber); border-radius: var(--radius); color: var(--amber-ink); font-size: .95rem; }
.cht-notice a { color: var(--amber-ink); }

/* The chat panel (SRS-CHT-024, templates/chat/_panel.html, chat/static/chat/panel.js): over the page in the bottom
   right corner, where the button was, 380 by 560 pixels at most; the whole window below 600 pixels wide, inside the
   phone's safe areas. The transcript takes the height that is left, and scrolls; the panel's body scrolls when even
   that does not fit. Hidden is hidden: the button and the panel set their own display. */
.chat-fab[hidden], .chat-panel[hidden] { display: none; }
.chat-panel { position: fixed; z-index: 40; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; box-sizing: border-box; width: 380px; max-width: calc(100vw - 32px); height: 560px;
  max-height: calc(100vh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background: var(--paper); border: 1px solid var(--rule); border-top: 4px solid var(--navy); border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(3, 42, 76, .28); font-size: 1rem; line-height: 1.45; animation: chat-panel-in .15s ease-out; }
@keyframes chat-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.chat-panel-head { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; background: var(--white); border-bottom: 1px solid var(--rule); }
.chat-panel-title { flex: 1 1 auto; margin: 0; padding: 0; border: 0; font-size: 1.1rem; }
.chat-panel-control { min-height: 36px; padding: 4px 12px; background: var(--white); color: var(--ink); border: 1px solid #8a8a84; font-size: .9rem; }
.chat-panel-control:hover { background: var(--rule-soft); border-color: var(--ink); color: var(--ink); }
.chat-panel-full { flex-basis: 100%; font-size: .9rem; }
.chat-panel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 12px; }
.chat-panel-content { flex: 1 0 auto; display: flex; flex-direction: column; }
.chat-panel .cht-availability, .chat-panel .cht-notice { max-width: none; margin: 0 0 8px; padding: 8px 12px; font-size: .88rem; }
.chat-panel .cht-availability { border-left-width: 4px; }
.chat-panel .cht-notice { border-left-width: 4px; }
.chat-panel .cht-hours { font-size: .85rem; }
/* In a chat the state takes one line (the hours are on the chat page), and the status and who is helping run on. */
.chat-panel-in-chat .cht-availability { padding: 6px 12px; }
.chat-panel-in-chat .cht-hours { display: none; }
.chat-panel .cht-chat { flex: 1 0 auto; display: flex; flex-direction: column; max-width: none; }
.chat-panel .cht-status, .chat-panel .cht-people { display: inline; margin: 0; }
.chat-panel .cht-people[hidden] { display: none; }
.chat-panel .cht-connection { margin: 0 0 .4em; }
.chat-panel .cht-connection:empty { display: none; }
.chat-panel .cht-log { flex: 1 1 0; min-height: 7rem; max-height: none; margin: 6px 0 10px; padding: 8px; }
.chat-panel .cht-form, .chat-panel .cht-form .field { margin-bottom: 8px; }
.chat-panel .cht-form .form-actions { align-items: center; gap: 8px 12px; margin-bottom: 0; }
.chat-panel .cht-close { margin: 0; }
.chat-panel textarea { min-height: 3.4rem; }
.chat-panel-end { margin-left: auto; padding: 6px 12px; font-size: .9rem; }
.chat-panel-file { font-size: .95rem; }
.chat-panel-new { margin: 0; }
@media (max-width: 600px) {
  .chat-panel { inset: 0; width: auto; max-width: none; height: auto; max-height: none; border: 0; border-radius: 0; box-shadow: none;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  html.chat-panel-open, html.chat-panel-open body { overflow: hidden; }  /* the page behind does not scroll */
}
@media (prefers-reduced-motion: reduce) { .chat-panel { animation: none; } }
@media (forced-colors: active) { .chat-panel { border: 2px solid CanvasText; } }
@media print { .chat-panel { display: none; } }