/* Republic of Fluid - shared state frame for the sites of the organs.
   Every organ site loads this file first, then its own site.css.
   The frame fixes the state band, the breadcrumb, the footer and the
   accessibility floor. Each organ overrides the accent tokens and
   restyles its own masthead, navigation and content components.
   No external resource is loaded: Articles 109(5) and 301. */

:root {
  --f-ink:       #14202b;
  --f-ink-soft:  #4a5a68;
  --f-ink-faint: #7c8a95;
  --f-paper:     #ffffff;
  --f-shell:     #e9eef3;
  --f-rule:      #c8d4de;
  --f-state:     #2f5680;
  --f-sand:      #ece3b3;
  --f-live:      #1a6f37;
  --f-warn:      #a8131b;

  --f-serif: "Charis SIL", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Times New Roman", serif;
  --f-sans: "Noto Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Overridden by each organ. */
  --accent:      #2f5680;
  --accent-deep: #1d3a58;
  --accent-soft: #dce6f0;
  --accent-ink:  #ffffff;
  --org-font:    var(--f-serif);
  --org-measure: 36rem;
}

/* ---------- ground ---------- */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--f-shell);
  color: var(--f-ink);
  font-family: var(--org-font);
  font-size: 17px;
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--f-ink);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--f-ink);
  color: #fff;
  padding: .6rem 1rem;
  z-index: 40;
}

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
}

.wrap {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- state band: constant across every organ ---------- */

.statebar {
  background: var(--f-ink);
  color: #cfdae4;
  font-family: var(--f-sans);
  font-size: .74rem;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.statebar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.15rem;
  height: 2.3rem;
}

.statebar a {
  color: #cfdae4;
  text-decoration: none;
}

.statebar a:hover {
  color: #fff;
  text-decoration: underline;
}

.statebar .rep {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.09em;
}

.statebar .sep {
  color: #5d707f;
}

.statebar .grow {
  margin-left: auto;
}

@media (max-width: 35rem) {
  .statebar .wrap {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 0 1.15rem;
  }

.statebar .wrap > * {
  flex: 0 0 auto;
}
  .statebar .wrap::after {
    content: "";
    flex: 0 0 1.15rem;
  }

.statebar .grow {
  margin-left: 0;
}
}

/* ---------- organ masthead skeleton ---------- */

.orghead {
  background: var(--f-paper);
}

.orghead .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
}

.orghead .marque {
  flex: none;
  width: 56px;
  height: 56px;
}

.orghead .marque svg {
  display: block;
  width: 100%;
  height: 100%;
}

.orghead .idblock {
  min-width: 0;
}

.orghead .kicker {
  font-family: var(--f-sans);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--f-ink-faint);
  margin: 0 0 .15rem;
}

.orghead h1,
.orghead .orgname {
  margin: 0;
  font-size: 1.42rem;
  line-height: 1.18;
  font-weight: 600;
  letter-spacing: -.01em;
}

.orghead .orgname a {
  color: inherit;
  text-decoration: none;
}

.orghead .basis {
  margin: .2rem 0 0;
  font-family: var(--f-sans);
  font-size: .78rem;
  color: var(--f-ink-soft);
}

/* ---------- organ navigation skeleton ---------- */

.orgnav {
  background: var(--accent);
}

.orgnav .wrap {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  padding: 0 1.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.orgnav a {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--f-sans);
  font-size: .85rem;
  color: var(--accent-ink);
  text-decoration: none;
  padding: .72rem .95rem;
  border-bottom: 3px solid transparent;
}

.orgnav a:hover {
  background: rgba(255,255,255,0.14);
  color: var(--accent-ink);
}

.orgnav a[aria-current="page"] {
  border-bottom-color: var(--f-sand);
  font-weight: 600;
}

/* ---------- sheet ---------- */

main {
  display: block;
}

.sheet {
  background: var(--f-paper);
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem;
  border-left: 1px solid var(--f-rule);
  border-right: 1px solid var(--f-rule);
}

.sheet > *:first-child {
  margin-top: 0;
}

.sheet > *:last-child {
  margin-bottom: 0;
}

.crumbs {
  font-family: var(--f-sans);
  font-size: 0.78rem;
  color: var(--f-ink-soft);
  margin: 0 0 1.5rem;
}

.crumbs a {
  color: var(--f-ink-soft);
}

/* ---------- headings and running text ---------- */

.page-title {
  font-size: 1.7rem;
  margin: 0.2rem 0 0.7rem;
  font-weight: 600;
  letter-spacing: -0-.02em;
}

h2 {
  font-size: 1.28rem;
  line-height: 1.25;
  letter-spacing: -0-.005em;
}

h3 {
  font-size: 1.02rem;
  margin: 1.7rem 0 0.5rem;
}

p, li {
  max-width: 100%;
}

.prose p {
  margin: 0 0 0.95rem;
}

.lede,
.prose p.lede {
  font-size: 1.14rem;
  color: var(--f-ink-soft);
  margin-top: 0;
}

/* ---------- components available to every organ ---------- */

.legal {
  font-family: var(--f-sans);
  font-size: .82rem;
  line-height: 1.55;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  padding: .8rem 1rem;
  margin: 1.4rem 0;
}

.legal p {
  max-width: none;
  margin: 0 0 0.5rem;
}

.legal p:last-child {
  margin: 0;
}

.cite {
  font-family: var(--f-sans);
  font-size: .74rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--f-ink-faint);
}

table.reg {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9rem;
}

table.reg caption {
  text-align: left;
  font-family: var(--f-sans);
  font-size: .78rem;
  color: var(--f-ink-soft);
  padding-bottom: .5rem;
}

table.reg th,
table.reg td {
  text-align: left;
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--f-rule);
  vertical-align: top;
}

table.reg thead th {
  font-family: var(--f-sans);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--f-ink-soft);
  border-bottom: 2px solid var(--accent);
}

table.reg tbody tr:hover {
  background: var(--f-shell);
}

.scroller {
  overflow-x: auto;
}

.tag {
  display: inline-block;
  font-family: var(--f-sans);
  font-size: .68rem;
  margin-left: .30rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .1rem .42rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
}

.tag.open {
  color: var(--f-live);
}

.tag.closed {
  color: var(--f-ink-faint);
}

.tag.alert {
  color: var(--f-warn);
}

.field {
  font-family: var(--f-sans);
  font-size: 0.88rem;
}

.field label {
  display: block;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--f-ink-soft);
  margin-bottom: .25rem;
}

.field input,
.field select {
  font: inherit;
  padding: .48rem .6rem;
  border: 1px solid var(--f-rule);
  background: var(--f-paper);
  color: var(--f-ink);
  border-radius: 2px;
  width: 100%;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: flex-end;
  margin: 1.1rem 0;
}

.controls .field {
  flex: 1 1 12rem;
}

button.act {
  font-family: var(--f-sans);
  font-size: .85rem;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  padding: .55rem 1rem;
  border-radius: 2px;
}

button.act:hover {
  background: var(--accent-deep);
}

button.ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

button.ghost:hover {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.count {
  font-family: var(--f-sans);
  font-size: 0.8rem;
  color: var(--f-ink-soft);
  margin: 0.4rem 0 0;
}

.empty {
  font-family: var(--f-sans);
  font-size: 0.88rem;
  color: var(--f-ink-soft);
  padding: 1.2rem 0;
}

/* ---------- footer: constant skeleton, organ accent on the rule ---------- */

.orgfoot {
  background: var(--f-ink);
  color: #b9c6d2;
  font-family: var(--f-sans);
  font-size: .84rem;
  border-top: 5px solid var(--accent);
  margin-top: 0;
}

.orgfoot .wrap {
  display: grid;
  gap: 1.4rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-top: 2rem;
  padding-bottom: 2.4rem;
}

.orgfoot h2 {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: #fff;
  margin: 0 0 .55rem;
}

.orgfoot p {
  margin: 0 0 0.35rem;
  max-width: none;
  line-height: 1.5;
}

.orgfoot a {
  color: #b9c6d2;
}

.orgfoot a:hover {
  color: #fff;
}

.orgfoot .fine {
  color: #7f909e;
  font-size: 0.78rem;
}

/* ---------- narrow screens, print, reduced motion ---------- */

@media (max-width: 46rem) {
  body { font-size: 16px;
}

.orghead .wrap {
  flex-wrap: wrap;
}

.orghead .marque {
  width: 44px;
  height: 44px;
}

.orgnav .wrap {
  padding: 0;
}

.orgnav a {
  padding: 0.6rem 0.75rem;
  font-size: 0.8rem;
}

.sheet {
  border-left: 0;
  border-right: 0;
}
}

@media print {
  .statebar, .orgnav, .orgfoot { display: none;
}

body {
  background: #fff;
  font-size: 11pt;
}

.sheet {
  border: 0;
}
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto;
}
* {
  transition: none !important;
  animation: none !important;
}
}