/* SGA-OIS specification site.
   Palette and proportions follow the partner brief, so the printed and the
   online material read as one thing. */

:root {
  --deep:#0C3025; --mid:#14513C; --lime:#8DC63F; --lime-dk:#6FA22F;
  /* --lime-dk is an accent only: 3.05:1 on white, below the 4.5:1 floor for
     type. Anything that carries text on a light ground uses --lime-ink. */
  --lime-ink:#4D7C18;
  --ink:#15201C; --body:#3A4642; --mute:#7C8A85;
  --cream:#FBFAF6; --line:#E2E7E2; --gold:#C9A227;
  --parch:#F8F2E0; --parch-line:#E8DCBB;
  --code-bg:#0E2A22; --max:74rem;
}

* { box-sizing:border-box; }
/* Any explicit display value beats the browser's [hidden] rule, so an
   element with display:flex stays on screen while claiming to be hidden.
   This makes the attribute mean what it says, everywhere. */
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
body {
  margin:0; background:#fff; color:var(--body);
  font:16px/1.65 "Segoe UI",-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; }
a { color:var(--mid); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:var(--max); margin:0 auto; padding:3.25rem 1.5rem; }

h1,h2,h3,h4 { color:var(--ink); line-height:1.2; letter-spacing:-.015em; margin:0 0 .6rem; }
h1 { font-size:2.3rem; font-weight:700; }
h2 { font-size:1.55rem; font-weight:700; margin-top:0; }
h3 { font-size:1.05rem; font-weight:700; }
h4 { font-size:.98rem; font-weight:700; margin:1.4rem 0 .35rem; color:var(--mid); }
p { margin:0 0 .9rem; }
.lede { font-size:1.09rem; color:var(--body); max-width:52rem; }
.note { color:var(--mute); font-size:.92rem; }
.mute { color:var(--mute); font-size:.85rem; font-weight:400; }
.small { font-size:.87rem; }
.ph { margin-bottom:.5rem; }

/* ---------------------------------------------------------------- header */
.top {
  position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:1.5rem; padding:.55rem 1.5rem; background:var(--deep);
  border-bottom:3px solid var(--lime);
}
.top .brand { display:flex; align-items:center; gap:.7rem; color:#fff;
              flex:none; white-space:nowrap; }
.top .brand:hover { text-decoration:none; }
.top .brand img { height:2.35rem; width:auto; }
.top nav { margin-left:auto; display:flex; gap:.35rem; }
.top nav a {
  color:#CFE3DA; padding:.45rem .85rem; border-radius:5px; font-size:.94rem;
  font-weight:500;
}
.top nav a:hover { background:rgba(255,255,255,.08); text-decoration:none; color:#fff; }
.top nav a.on { background:var(--lime); color:var(--deep); font-weight:700; }
.menu { display:none; background:none; border:0; color:#fff; font-size:1.5rem; cursor:pointer; }

/* ---------------------------------------------------------------- hero */
/* Both heroes hold one height at every width. Left to itself a hero's height
   follows its content, so each reflow reshapes the frame, `cover` rescales the
   art to match, and the picture jumps -- this page went through six different
   heights between a desktop and a phone. Pinning the height stops it: once the
   frame is narrower than the image renders, the scale is locked to the height
   and narrowing only slides the left edge away.

   The pinned number has to clear the tallest state, which is always the phone,
   so the hero type scales continuously (see .hero h1) instead of stepping down
   at 900px. Padding is only a floor -- flex centering places the content.

   green.jpg is cropped rather than merely repositioned: the uncropped frame
   carried a lot of empty turf above and below the cup, which showed as dead
   band at every width. 290px came off the 1036px original -- a third from the
   top, two thirds from the bottom -- which tightens the frame and drops the cup
   from 53% to 61% of the image height. The uncropped original is kept at
   originals/green-uncropped.jpg. Because the crop leaves a 2.547 aspect,
   the height drives the scale below 1528px and the vertical position only
   matters above it, so the art is centered and the crop does the framing. */
.hero {
  background:linear-gradient(115deg, rgba(12,48,37,.95) 30%, rgba(12,48,37,.74) 68%,
                                     rgba(12,48,37,.58) 100%),
             url("green.jpg") 70% 50% / cover no-repeat;
  color:#fff;
  min-height:37.5rem; display:flex; align-items:center;   /* 600px */
}
.hero .wrap { padding:2rem 1.5rem; width:100%; }
.hero .eyebrow {
  color:var(--lime); font-size:.92rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; margin-bottom:1rem;
}
.hero h1 { color:#fff; font-size:clamp(1.45rem, 3.4vw, 2.9rem); max-width:34ch; }
.hero .lede { color:#CFE3DA; max-width:46rem; margin-top:1rem;
               font-size:clamp(.92rem, 1.25vw, 1.09rem); }
.cta { margin-top:2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.btn {
  display:inline-block; background:var(--lime); color:var(--deep);
  padding:.72rem 1.5rem; border-radius:6px; font-weight:700; font-size:.97rem;
}
.btn:hover { background:#9FD653; text-decoration:none; }
.btn.ghost { background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.btn.ghost:hover { background:rgba(255,255,255,.1); }

.btn.sm { padding:.5rem 1rem; font-size:.9rem; }
.btn.outline { background:transparent; color:var(--deep);
               box-shadow:inset 0 0 0 2px var(--lime); }
.btn.outline:hover { background:var(--lime); }
.tabcta { margin:1.3rem 0 0; display:flex; gap:.6rem; flex-wrap:wrap; }

/* The definition of SGA-OIS: a solid green bar edge to edge, acting as the
   header of the pale band beneath it. The negative margins cancel the section's
   own padding so the bar bleeds to both edges of the viewport; .definer then
   re-establishes the same measure the rest of the page uses, so the heading
   still lines up with everything above and below it. */
section.band > .define {
  max-width:none; margin:-3.25rem -1.5rem 2.6rem;
  background:var(--deep); padding:2.9rem 1.5rem;
}
.definner { max-width:var(--max); margin:0 auto; }
/* The two component names below the bar title a column each, so they
   carry more weight than an ordinary h4. Scoped to this block only. */
.define + .two h4 { font-size:1.2rem; }
.define h2 { color:var(--lime); margin:0 0 .7rem; }
.define p { color:#fff; margin:0; font-size:1.04rem; line-height:1.68; }
.define b, .define strong { color:#fff; }

/* The closing sentence of the section: no rule above it, and free to run the
   full measure. It reads as the last thing said, not as a pull quote. */
.statement { margin:2.2rem 0 0; text-align:center;
             font-size:1.1rem; font-weight:600; color:var(--deep);
             line-height:1.55; }

.centered { text-align:center; max-width:44rem; margin-left:auto;
            margin-right:auto; }
/* A note straight after a set of cards is about those cards, so it sits tight
   under them. It had 2.4rem above and the button below it had 2rem -- near
   enough identical that the eye grouped it with the button instead, and it read
   as small print for the call to action rather than as a pointer back into the
   cards. Proximity is the only grouping cue here, so it has to be decisive. */
.cards + .note { margin-top:1.25rem; }
.note + .cta { margin-top:3.25rem; }

/* ---------------------------------------------------------------- sign in */
.usermenu { position:relative; margin-left:.4rem; }
.usericon {
  display:grid; place-items:center; width:2.1rem; height:2.1rem;
  border-radius:50%; color:#CFE3DA; text-decoration:none;
  border:1px solid rgba(255,255,255,.22);
}
.usericon:hover, .usericon[aria-expanded="true"] {
  color:var(--deep); background:var(--lime); border-color:var(--lime);
  text-decoration:none;
}
.usericon:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }

.userpanel {
  position:absolute; right:0; top:calc(100% + .55rem); width:17.5rem; z-index:60;
  background:#fff; color:var(--body); border:1px solid var(--line);
  border-radius:10px; padding:1rem 1.1rem 1.1rem;
  box-shadow:0 14px 34px rgba(6,22,16,.28);
}
.userpanel label { display:block; margin:.65rem 0 0; font-size:.8rem;
                   font-weight:600; color:var(--mid); }
.userpanel input { width:100%; font:inherit; font-size:.92rem; margin-top:.25rem;
                   padding:.5rem .6rem; border:1px solid var(--line);
                   border-radius:6px; background:var(--cream); }
.userpanel input:focus { outline:none; border-color:var(--lime); background:#fff;
                         box-shadow:0 0 0 3px rgba(141,198,63,.25); }
.userpanel .btn { width:100%; margin-top:.9rem; text-align:center; }
.userpanel p { margin:.75rem 0 0; font-size:.86rem; }
.userpanel p.join { border-top:1px solid var(--line); padding-top:.7rem;
                    margin-top:.9rem; font-weight:600; }

@media (max-width:900px) {
  .usermenu { order:2; margin-left:auto; margin-right:.6rem; }
  .userpanel { position:fixed; right:.75rem; left:.75rem; width:auto; }
}

/* ------------------------------------------------------ partner registration */
/* The partner hero uses its own art and a near-black scrim rather than the
   site's deep green, so the page does not read as the home page again. The
   gradient is heavy on the left where the text sits and clears to the right so
   the hardware in the image is actually visible. */
.hero.partners {
  background:linear-gradient(100deg, rgba(6,16,13,.96) 0%, rgba(6,16,13,.88) 34%,
                                     rgba(6,16,13,.44) 66%, rgba(6,16,13,.12) 100%),
             url("partners.jpg") right 34% / cover no-repeat;
}
/* Right-anchored on purpose: the left third of that render is empty, so as the
   frame narrows the only thing lost is emptiness and the hardware stays whole. */
.hero.partners .lede { color:#D5E4DC; }

.hero.short { min-height:30rem; }   /* 480px */
.hero.short .wrap { padding:2rem 1.5rem; }

.card.plain { cursor:default; }
.card.plain:hover { border-color:var(--line); transform:none; }

/* This one runs the full measure: it sits directly above a form that is
   already full width, and a narrow paragraph over a wide form looks like a
   mistake. The 52rem cap stays everywhere else. */
#register > .lede { max-width:none; }

.pform { margin-top:1.6rem; }
.pform fieldset {
  border:1px solid var(--line); border-radius:10px; background:#fff;
  padding:1.3rem 1.4rem 1.5rem; margin:0 0 1.1rem;
}
.pform legend {
  font-weight:700; color:var(--deep); font-size:.82rem; text-transform:uppercase;
  letter-spacing:.1em; padding:0 .5rem; margin-left:-.5rem;
}
/* The contact blocks reorder so the person registering is always first --
   see applyRole() in sga.js. Flex order rather than moving DOM nodes, so
   nothing loses focus or its typed value when the role changes. */
.contacts { display:flex; flex-direction:column; }
.contacts fieldset.primary { border-color:var(--lime); }
.youtag {
  margin-left:.6rem; padding:.12rem .45rem; border-radius:4px;
  background:var(--lime); color:var(--deep);
  font-size:.68rem; letter-spacing:.08em; vertical-align:.1em;
}
.whoami { background:var(--cream) !important; }

/* A status marker beside a heading: says plainly that something is not settled
   yet, without a paragraph of hedging under the title. */
/* Wide content scrolls inside its own box rather than pushing the page sideways.
   A table that makes the whole document scroll horizontally is a bug on every
   screen it does it on. */
/* Wide content scrolls inside its own box; the page itself never scrolls
   sideways. Applied to every top-level table at build time -- see
   build_site.scroll_wrap_tables -- so no author has to remember it, and a table
   added later cannot reintroduce the overflow.

   The gradients are a scroll affordance. Without an edge shadow there is no
   clue that the table continues past the cut, and a reader on a phone simply
   believes the last visible column is the last column. */
.tscroll {
  max-width:100%; overflow-x:auto; margin:1.4rem 0;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(12,48,37,.13), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(12,48,37,.13), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:38px 100%, 38px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
}
.tscroll table { margin:0; min-width:34rem; }

.pill {
  display:inline-block; vertical-align:.22em; margin-left:.65rem;
  padding:.2rem .55rem; border-radius:20px;
  background:var(--gold); color:#3A2E06;
  font-size:.64rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase;
}

.frow { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fld { display:block; margin:.9rem 0 0; }
.fld > span { display:block; font-size:.86rem; font-weight:600; color:var(--mid);
              margin-bottom:.3rem; }
.fld > span b { color:var(--gold); font-weight:700; }
.pform input, .pform select, .pform textarea {
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  padding:.6rem .7rem; border:1px solid var(--line); border-radius:6px;
  background:var(--cream);
}
.pform textarea { resize:vertical; }
.pform input:focus, .pform select:focus, .pform textarea:focus {
  outline:none; border-color:var(--lime); background:#fff;
  box-shadow:0 0 0 3px rgba(141,198,63,.25);
}
/* Only mark a field wrong once it has been submitted or left -- turning a form
   red while somebody is still typing in it teaches them nothing. */
.pform .bad input, .pform .bad select, .pform .bad textarea { border-color:#B4413A; }
.pform .bad > span { color:#B4413A; }
.ferr { display:block; font-size:.82rem; color:#B4413A; margin-top:.25rem;
        font-weight:600; }

.chk { display:flex; align-items:flex-start; gap:.55rem; margin:.9rem 0 0;
       font-size:.92rem; color:var(--body); cursor:pointer; }
.chk input { width:auto; margin-top:.15rem; accent-color:var(--lime-dk); }
.chk.invite { color:var(--mute); font-size:.88rem; }

.fnote { font-size:.86rem; color:var(--mute); margin:.5rem 0 0; }
fieldset > .fnote:first-of-type { margin:0 0 .2rem; }
.fsubmit { display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap;
           margin-top:.4rem; }
.fsubmit .fnote { flex:1; min-width:16rem; margin:0; }

.fout { margin-top:1.6rem; border:1px solid var(--line); border-left:4px solid var(--lime);
        border-radius:0 10px 10px 0; background:var(--cream); padding:1.2rem 1.4rem; }
.fout h3 { margin:0 0 .3rem; }
.fout pre { background:var(--code-bg); color:#DCE9E2; border-radius:8px;
            padding:1rem 1.1rem; margin:.9rem 0; font-size:.85rem;
            white-space:pre-wrap; word-break:break-word; max-height:22rem;
            overflow:auto; }

@media (max-width:700px) { .frow { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- blocks */
.band { background:var(--cream); border-top:1px solid var(--line);
        border-bottom:1px solid var(--line); max-width:none; }
.band > * { max-width:var(--max); margin-left:auto; margin-right:auto; }
section.band { padding:3.25rem 1.5rem; }

/* The page head on the inner pages.

   Without it those pages opened straight onto body copy -- an <h1> floating on
   white, the lede under it, and nothing at all marking where the page began.
   Full-bleed like .band, but parchment rather than cream so it reads as the
   head of the page and not as one more content section. The tone is the same
   --parch the platform uses, so the spec site and the member pages stay one
   piece of design.

   Only the title and the blurb belong in here. Callouts and notes keep their
   own styling below it, on white, where they still read as interruptions. */
.pagehead { background:var(--parch); border-bottom:1px solid var(--parch-line); }
.pagehead .wrap { padding:2.9rem 1.5rem 2.55rem; }

/* The eyebrow carries the same typographic treatment as the hero's, but in
   --mid rather than --lime.

   Lime is this site's dark-ground color and nothing else: 7.0:1 on the deep
   green, 1.8:1 on this parchment -- unreadable. Every other lime in this
   stylesheet is either text on dark or a fill, and that is the rule the bar
   below keeps. Green in the band, legibility intact. */
.pagehead .eyebrow {
  display:flex; align-items:center; gap:.65rem; margin:0 0 .85rem;
  color:var(--mid); font-size:.82rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700;
}
.pagehead .eyebrow::before {
  content:""; flex:none; width:2rem; height:3px;
  background:var(--lime); border-radius:2px;
}

/* Bigger than the default h1. These pages have no hero, so the page head is
   the only thing giving them presence. */
.pagehead .ph { font-size:clamp(2.1rem, 4.2vw, 3rem); margin-bottom:.6rem; }
.pagehead .lede { max-width:56rem; font-size:1.12rem; }

.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.step b {
  display:inline-grid; place-items:center; width:2rem; height:2rem;
  background:var(--lime); color:var(--deep); border-radius:5px;
  font-weight:800; font-size:.9rem; margin-bottom:.6rem;
}
.step h3 { margin-bottom:.25rem; }
.step p { font-size:.93rem; margin:0; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.1rem; }
.card {
  display:block; background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:1.3rem 1.4rem; color:var(--body); transition:border-color .15s, transform .15s;
}
.card:hover { border-color:var(--lime); text-decoration:none; transform:translateY(-2px); }
.card h3 { margin-bottom:.35rem; }
.card p { font-size:.92rem; }
.card span { color:var(--lime-ink); font-weight:700; font-size:.88rem; }

/* minmax(0,1fr) rather than 1fr, and min-width:0 on the children.

   A grid item defaults to min-width:auto, which means it refuses to shrink
   below its content's intrinsic width. One <pre> with a long command line
   therefore widens its whole column, and the page picks up a horizontal
   scrollbar that has nothing to do with the text the reader is looking at.
   The pre already scrolls on its own; this is what lets it. */
.two { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.2rem; }
.two > * { min-width:0; }
/* ---------------------------------------------------------- audience tabs */
.tablist { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1.4rem;
           border-bottom:2px solid var(--line); }
.tab {
  font:inherit; font-weight:600; font-size:.95rem; cursor:pointer;
  display:flex; align-items:center; gap:.55rem;
  padding:.7rem 1.1rem; margin-bottom:-2px;
  background:none; border:0; border-bottom:3px solid transparent;
  color:var(--mute); border-radius:6px 6px 0 0;
}
.tab:hover { color:var(--ink); background:var(--cream); }
.tab.on { color:var(--deep); border-bottom-color:var(--lime); }
.tab .tn {
  font-size:.7rem; font-weight:700; letter-spacing:.06em;
  padding:.16rem .42rem; border-radius:4px;
  background:var(--line); color:var(--mute);
}
.tab.on .tn { background:var(--lime); color:var(--deep); }
.tab:focus-visible { outline:2px solid var(--lime); outline-offset:2px; }

/* Without JS these stay stacked and each keeps its own heading. */
[data-tab] > h4 { margin-top:0; }
[data-tabs] .tablist ~ [data-tab] > h4 { display:none; }

/* The problem grid on the home page. */
.probs { display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
         gap:1rem; margin:1.3rem 0; }
.prob { border:1px solid var(--line); border-top:3px solid var(--gold);
        border-radius:0 0 8px 8px; padding:1rem 1.1rem; background:#fff; }
.prob b { display:block; color:var(--ink); margin-bottom:.35rem; font-size:.98rem; }
.prob span { color:var(--mute); font-size:.9rem; line-height:1.55; }

/* The N x M diagram, shared with the partner brief. */
.diagram { margin:1.6rem 0 .4rem; }
.diagram svg { display:block; width:100%; height:auto; }
.diagram .cap { color:var(--mute); font-size:.86rem; margin-top:.5rem;
                text-align:center; }

.nots { display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:1.1rem; }
.nots div { border-left:3px solid var(--lime); padding-left:1rem; font-size:.95rem; }
.nots b { color:var(--ink); }

ul.ticks { list-style:none; padding:0; margin:0; }
ul.ticks li { position:relative; padding-left:1.5rem; margin-bottom:.6rem; font-size:.95rem; }
ul.ticks li::before {
  content:""; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem;
  background:var(--lime); border-radius:50%;
}
ol.ordered { padding-left:1.3rem; }
ol.ordered li { margin-bottom:.4rem; }

.pull {
  border-left:4px solid var(--gold); background:var(--cream);
  padding:.85rem 1.2rem; margin:1.1rem 0; font-size:1.02rem; color:var(--ink);
  font-weight:600; border-radius:0 6px 6px 0;
}
.callout {
  border:1px solid var(--line); border-left:4px solid var(--gold);
  background:var(--cream); border-radius:0 8px 8px 0; padding:1.1rem 1.3rem;
  margin:1.2rem 0; font-size:.95rem;
}
.rank { font-size:.94rem; }
.rank code { margin:0 .1rem; }

.lifecycle { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.8rem 0 2.4rem; }
.lifecycle div {
  flex:1 1 8rem; background:var(--deep); color:#fff; border-radius:7px;
  padding:.8rem 1rem; position:relative;
}
.lifecycle b { display:block; color:var(--lime); font-size:.83rem; letter-spacing:.09em; }
.lifecycle span { font-size:.85rem; color:#CFE3DA; }

/* ---------------------------------------------------------------- code */
pre {
  background:var(--code-bg); color:#DCEFE2; border-radius:8px;
  padding:1.1rem 1.3rem; overflow-x:auto; font-size:.86rem; line-height:1.55;
  margin:1rem 0;
}
pre code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
code {
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.88em;
  background:#EDF3EC; color:var(--mid); padding:.1em .38em; border-radius:4px;
}
pre code { background:none; color:inherit; padding:0; }

table.fields { width:100%; border-collapse:collapse; margin:.9rem 0; font-size:.93rem; }
table.fields td, table.fields th { padding:.5rem .7rem; border-bottom:1px solid var(--line);
                                   text-align:left; vertical-align:top; }
table.fields th { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em;
                  color:var(--mute); font-weight:700; }
table.fields td:first-child { width:14rem; }
table.fields.wide td:first-child { width:auto; white-space:nowrap; }
@media (max-width:640px) {
  table.fields td:first-child { width:auto; }
  table.fields.wide td:first-child { white-space:normal; overflow-wrap:anywhere; }
}

/* ---------------------------------------------------------------- details */
details {
  border:1px solid var(--line); border-radius:9px; margin-bottom:.7rem;
  background:#fff; overflow:hidden;
}
details[open] { border-color:#C9D6C9; box-shadow:0 1px 3px rgba(12,48,37,.06); }
summary {
  cursor:pointer; padding:.95rem 1.2rem; display:flex; align-items:center;
  gap:.75rem; font-weight:600; color:var(--ink); list-style:none;
  background:#fff; transition:background .12s;
}
summary::-webkit-details-marker { display:none; }
summary:hover { background:var(--cream); }
summary::before {
  content:""; flex:0 0 auto; width:.55rem; height:.55rem; margin-right:.1rem;
  border-right:2px solid var(--lime-dk); border-bottom:2px solid var(--lime-dk);
  transform:rotate(-45deg); transition:transform .18s;
}
details[open] > summary::before { transform:rotate(45deg); }
details[open] > summary { background:var(--deep); color:#fff; }
details[open] > summary::before { border-color:var(--lime); }
summary .sum { flex:1; }
summary .tag {
  font-size:.72rem; font-family:ui-monospace,monospace; color:var(--mute);
  background:#EDF3EC; padding:.15rem .5rem; border-radius:20px; font-weight:600;
}
details[open] > summary .tag { background:rgba(255,255,255,.14); color:#BFE0CC; }
.inner { padding:1.2rem 1.4rem 1.4rem; border-top:1px solid var(--line); }
.inner > :last-child { margin-bottom:0; }

.chnum {
  display:inline-block; background:var(--mid); color:#fff; font-size:.72rem;
  font-weight:800; padding:.15rem .45rem; border-radius:4px; margin-right:.5rem;
  font-family:ui-monospace,monospace;
}
details[open] .chnum { background:var(--lime); color:var(--deep); }
.blurb { color:var(--mute); font-weight:400; font-size:.88rem; }
details[open] > summary .blurb { color:#9DC9B6; }
h2.grp {
  font-size:.82rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--lime-ink); margin:2.2rem 0 .8rem; padding-bottom:.4rem;
  border-bottom:2px solid var(--line);
}
h2.grp:first-of-type { margin-top:1.4rem; }

/* ---------------------------------------------------------------- toolbar */
.toolbar { display:flex; gap:.6rem; align-items:center; margin:1.6rem 0 1.2rem; flex-wrap:wrap; }
.toolbar input {
  flex:1 1 16rem; padding:.6rem .9rem; border:1px solid var(--line); border-radius:7px;
  font:inherit; font-size:.94rem; background:#fff;
}
.toolbar input:focus { outline:2px solid var(--lime); border-color:transparent; }
.toolbar button {
  padding:.6rem 1rem; border:1px solid var(--line); background:#fff; border-radius:7px;
  font:inherit; font-size:.88rem; cursor:pointer; color:var(--mid); font-weight:600;
}
.toolbar button:hover { border-color:var(--lime); background:var(--cream); }
.count { font-size:.85rem; color:var(--mute); }
mark { background:#FFF2A8; color:inherit; padding:0 .1em; border-radius:2px; }
details.hidden { display:none; }

/* ---------------------------------------------------------------- footer */
.foot { background:var(--deep); color:#A9CCBB; margin-top:3rem; }
.foot .wrap { display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:2rem;
              padding-top:3rem; padding-bottom:2rem; }
.foot h4 { color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em;
           margin:0 0 .7rem; }
.foot a { display:block; color:#A9CCBB; font-size:.92rem; padding:.15rem 0; }
.foot a:hover { color:var(--lime); }
.foot p { font-size:.92rem; margin:.4rem 0 0; }
.foot b { color:#fff; }
/* Same treatment as the consumer site. The tagline is broken over two lines so
   it sits near the mark's own width -- on one line it ran 347px against a 168px
   mark, and centring that left the mark adrift. The cell shrinks to its widest
   line, so centring the mark inside it centres it over the text, and the small
   translate is an optical correction for the TM pulling the eye right. */
.foot .wrap > div:first-child { width:max-content; max-width:100%; }
/* The translate is an optical offset tuned by eye, not a geometric one: the
   centring above puts the mark's box centre on the text's, and this shifts it
   2px right of that so it sits where it looks right against the two centred
   lines. Kept as a transform so the centring maths underneath stays true. */
.fmark { display:block; height:3.5rem; width:auto; margin:0 auto;
         transform:translateX(2px); }
/* Centred so the shorter second line sits under the middle of the first rather
   than hanging off its left edge. Scoped to the tagline -- the contact block
   below it stays left-aligned with the rest of the footer. */
.fmark + p { margin-top:.3rem; line-height:1.35; text-align:center; }
/* Pushed further from the tagline above and tightened internally, so "Talk to
   us" reads as the email's label rather than sitting midway between the two. */
.foot .contact { margin-top:1.6rem; line-height:1.3; }
.foot .contact a { display:inline-block; color:var(--lime); font-weight:600; }
.foot .contact a:hover { text-decoration:underline; }


.legal { border-top:1px solid rgba(255,255,255,.12); font-size:.82rem;
         padding:1rem 1.5rem; display:flex; justify-content:space-between;
         max-width:var(--max); margin:0 auto; gap:1rem; flex-wrap:wrap; }

/* ---------------------------------------------------------------- responsive */
@media (max-width:900px) {
  .steps { grid-template-columns:repeat(2,1fr); }
  .two { grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .foot .wrap { grid-template-columns:1fr 1fr; }
  h1 { font-size:1.8rem; }
}
/* The nav used to collapse at 680px, but seven items plus the brand need far
   more room than that: between 680 and ~950 the brand was crushed under the
   nav and the account icon was pushed past the viewport edge, which is what
   put a horizontal scrollbar on every page. The main site collapses at 900 for
   the same reason; this is one item wider, so 950. */
@media (max-width:950px) {
  .menu { display:block; margin-left:auto; }
  .top nav { display:none; width:100%; flex-direction:column; }
  body.navopen .top { flex-wrap:wrap; }
  body.navopen .top nav { display:flex; padding-bottom:.5rem; }
}

@media (max-width:680px) {
  .steps { grid-template-columns:1fr; }
  .foot .wrap { grid-template-columns:1fr; }
  table.fields td:first-child { width:auto; }
}

@media print {
  .top, .toolbar, .foot .wrap a { display:none; }
  details { border:0; } details .inner { border:0; }
  details:not([open]) .inner { display:block; }
  .hero { background:var(--deep); }
}

/* --------------------------------------------------------- field reference
   A field name in the prose is clickable and opens what the standard says
   about it. Two jobs here: mark the name so a reader can see at a glance that
   it carries weight, and style the panel that opens.

   The underline colors ARE the identifier. Scanning a page, a reader should be
   able to see which fields a shot will not rate without before reading a word
   about them -- lime for those, gold for the ones a rating model wants next,
   quiet grey for everything else that is merely required by the schema. */
.fieldref {
  cursor: pointer;
  border-bottom: 2px solid var(--line);
  border-radius: 2px 2px 0 0;
  transition: background .12s ease;
}
.fieldref:hover,
.fieldref:focus-visible { background: var(--parch); }
.fieldref:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.fieldref.is-counts { border-bottom-color: var(--lime-dk); }
.fieldref.is-wanted { border-bottom-color: var(--gold); }
.fieldref.is-req    { border-bottom-color: var(--mute); }

.fieldpop {
  position: absolute; z-index: 60; width: min(27rem, calc(100vw - 2rem));
  background: #fff; color: var(--body);
  border: 1px solid var(--line); border-top: 3px solid var(--lime);
  border-radius: 8px; padding: .9rem 1rem 1rem;
  box-shadow: 0 10px 30px rgba(12,48,37,.17), 0 2px 6px rgba(12,48,37,.09);
  font-size: .95rem; line-height: 1.55;
}
.fp-h { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .35rem; }
.fp-h code { font-size: 1rem; font-weight: 700; color: var(--ink); }
.fp-m { margin: 0 0 .5rem; color: var(--mute); font-size: .84rem;
        text-transform: uppercase; letter-spacing: .06em; }
.fp-d { margin: 0 0 .7rem; }
.fp-l { margin: 0 0 .35rem; font-size: .78rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .1em; color: var(--mute); }
.fp-e { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .7rem;
        max-height: 11rem; overflow-y: auto; }
.fp-e code { background: var(--cream); border: 1px solid var(--line);
             border-radius: 4px; padding: .1rem .4rem; font-size: .85rem; }
.fp-f { margin: 0; font-size: .87rem; }

/* The badge repeats what the underline said, for anyone who arrived by
   keyboard or screen reader and never saw the color. */
.fb { font-size: .68rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .07em; padding: .15rem .45rem; border-radius: 4px; }
.fb.counts { background: var(--lime); color: var(--deep); }
.fb.wanted { background: var(--gold); color: #3A2E06; }
.fb.req    { background: var(--cream); color: var(--body); border: 1px solid var(--line); }

/* Honeypot field on public forms: never seen by people, filled by bots. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }