/* =====================================================================
   One Special Interest Group's page.

   Loaded only by cms/sig_page.html and the four small screens that hang
   off it.

   WHY THIS FILE EXISTS. On 18 September 2026 the group page was measured
   with twelve contributions on it: 8,922px on a desktop, 11,996px on a
   phone, about one full screen per contribution, a 700px text measure in
   a 1,230px column, and twelve identical "Get in touch" buttons. James,
   the same day: "it doesn't use the space well, not effectively laid out,
   way too much scrolling... you're making this part very badly designed
   in terms of aesthetics and functionality."

   A workshop programme is the same object as a conference programme at a
   twentieth of the size, and the conference pages built this week carry
   three hundred talks in a few screens. So this is the same family: a
   numbered running order, one row each, folding open in place. Thirty
   contributions become about two screens instead of about thirty.

   THE SYSTEM, the same one as conference.css, deliberately:

     display   60 / 40 / 24 / 18      Roboto 900
     text      17 / 15 / 13           Inter
     label     11                     Roboto 700, 0.15em, caps
     column    1100, gutters 40 / 24
     section   96px, 64 on a phone
     gaps      2px between panels, no radius anywhere
     ink       navy #003150, muted #3b6078, rules #dde4e8
     ground    white, tint #f8f9fb, navy; green #04633C for marks only

   The buttons are the site's own (.button and its variants in site.css).
   Nothing here restyles them.
   ===================================================================== */

.grouppage {
  --strip: 47px;

  --navy: #003150;
  --green: #04633C;
  --tint: #f8f9fb;
  --muted: #3b6078;
  --rule: #dde4e8;
  --amber: #8a5a00;

  --display-xl: clamp(32px, 4.4vw, 56px);
  --display-l: clamp(28px, 2.8vw, 40px);
  --display-m: 24px;
  --display-s: 18px;

  --text: 17px;
  --text-s: 15px;
  --text-xs: 13px;

  --column: 1100px;
  --gutter: 40px;
  --section: 96px;

  font-family: 'Inter', sans-serif;
}

/* One sticky bar, not two. The site masthead goes with the page and the
   group's own strip stays, which is what the conference pages do. */
body:has(main.grouppage) .masthead { position: static; }
.grouppage [id] { scroll-margin-top: var(--strip); }

/* ------------------------------------------------------------ strip -- */

.gp-sub {
  position: sticky;
  top: 0;
  z-index: 15;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.gp-sub-inner {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 46px;
}
.gp-sub-here {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Roboto', sans-serif;
  font-size: var(--text-xs);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}
.gp-sub-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.gp-sub-links::-webkit-scrollbar { display: none; }
.gp-sub-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.gp-sub-links a:hover { color: var(--navy); border-bottom-color: var(--green); }
.gp-sub-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Roboto', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid var(--green);
  padding-bottom: 2px;
}

/* ------------------------------------------------------------- hero -- */

.gp-hero {
  position: relative;
  background: var(--navy);
  color: #ffffff;
  overflow: hidden;
}
.gp-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.38;
}
.gp-hero__inner {
  position: relative;
  max-width: var(--column);
  margin: 0 auto;
  padding: 80px var(--gutter) 72px;
}
.gp-hero .gp-eyebrow { color: #ffffff; }
.gp-h1 {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-weight: 900;
  font-size: var(--display-xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
}
.gp-hero__lede {
  font-size: var(--text);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
  margin: 18px 0 0;
}

/* ONE ACTION, not four. A member of the group was offered "Add your
   contribution", "Join the meeting", "Who else is in it" and "Choose your
   groups" on the same page, which is a way of asking somebody to make a
   decision before they have read anything. */
.gp-hero__do {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}
.gp-hero__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.gp-hero__state::before {
  content: "";
  width: 8px;
  height: 8px;
  background: #58c08e;
}

/* --------------------------------------------------------- sections -- */

.gp-sec { padding: var(--section) 0; }
.gp-sec--tint { background: var(--tint); }
/* The locked programme. The skeleton cards behind the panel are drawn in
   white at low opacity, so this band has to be dark or they are invisible
   and the whole point of showing how much is behind the lock is lost. */
.gp-sec--navy { background: var(--navy); color: #ffffff; }
.gp-sec--navy .gp-h2 { color: #ffffff; }
.gp-sec--navy .gp-eyebrow { color: #ffffff; }
/* The lock panel is taller than the three cards it sits over and is
   centred on them, so it spills above the stack and over the heading. The
   panel is the point, so the stack moves down rather than the panel being
   made smaller. */
.gp-sec--navy .peek { margin-top: 56px; }
.gp-sec--navy .gp-offer { margin-top: 32px; max-width: 62ch; }
.gp-offer p { font-size: var(--text-s); line-height: 1.7; color: var(--muted); margin: 0 0 18px; }
.gp-sec--navy .gp-offer p { color: rgba(255, 255, 255, 0.86); }

/* A BUTTON ON THE NAVY BAND IS A LIGHT BUTTON, WHETHER ANYBODY SAID SO OR
   NOT. The site's `.button` is a navy pill that goes transparent with navy
   ink on hover, so on this ground it disappears under the cursor. James,
   19 September 2026: "the Join WSSET under the first workshop section also
   invisible on hover."

   The templates pass `light=True` as well. This is here because a hover
   state is not something anybody sees while building a page: it needs
   somebody to move a mouse over the one band where it is wrong. */
.gp-sec--navy .button:not(.button--light),
.gp-sec--navy button.button:not(.button--light) {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--navy);
}
.gp-sec--navy .button:not(.button--light):hover,
.gp-sec--navy button.button:not(.button--light):hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}

.gp-empty {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.86);
}
.gp-sec--tight { padding-top: 64px; }
.gp-inner { max-width: var(--column); margin: 0 auto; padding: 0 var(--gutter); }

.gp-eyebrow {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--green);
}
.gp-rule { display: block; width: 48px; height: 3px; background: var(--green); margin: 14px 0; }
.gp-head { margin-bottom: 32px; }
.gp-h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: var(--display-l);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}
.gp-h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: var(--display-m);
  line-height: 1.2;
  color: var(--navy);
  margin: 0 0 14px;
}
.gp-note { font-size: var(--text-xs); color: var(--muted); margin: 14px 0 0; }

/* ---------------------------------------------------- the field ----- */

/* A lead at a measure somebody can read, not a 700px column inside a
   1,230px one and not a paragraph beside a box. */
.gp-lead p {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.7;
  color: #22415a;
  margin: 0 0 20px;
  max-width: 62ch;
}

.gp-chips { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.gp-chips li {
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 11px 18px;
  font-size: var(--text-xs);
  color: var(--navy);
}

/* The facts as lines of text. Every one of these was a card or a band of
   its own, which is four screens of scroll for eight lines of fact. */
.gp-lines { margin: 38px 0 0; display: grid; gap: 0; }
.gp-lines > div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}
.gp-lines > div:last-child { border-bottom: 1px solid var(--rule); }
/* `margin: 0` is the whole fix and it is not decoration. site.css carries
   a bare `dt { margin: 24px 0 0 }` for definition lists in prose, which
   applies here too and pushed every label 24px below the value it belongs
   to. James, 19 September 2026: "the where it reaches section, formatting
   all off and wonky, not even lined up well, with the countries to it's
   right." The label and its value now start on the same line. */
.gp-lines dt {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
  /* 11px caps against 15px text: three pixels puts the cap height of one
     on the x-height of the other. */
  padding-top: 3px;
}
.gp-lines dd { margin: 0; font-size: var(--text-s); line-height: 1.6; color: var(--navy); }
/* A link inside a sentence cannot be made 44px tall without opening a gap
   in the line, so it is padded and the padding is taken back out of the
   margin: the target is 46px and the text sits exactly where it did. */
.gp-lines a {
  color: var(--navy);
  display: inline-block;
  padding: 11px 0;
  margin: -11px 0;
}

/* ------------------------------------------------ the programme door - */

.gp-when { font-size: var(--text-s); color: var(--muted); margin: 0 0 26px; }
.gp-sec--navy .gp-when { color: rgba(255, 255, 255, 0.86); }

/* The first five lines, as a taste of the room rather than the room. */
.gp-five { list-style: none; margin: 0 0 28px; padding: 0; background: #ffffff; border: 1px solid var(--rule); }
.gp-five > li + li { border-top: 1px solid var(--rule); }
.gp-five a {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 16px;
  align-items: center;
  min-height: 56px;
  padding: 12px 20px;
  text-decoration: none;
}
.gp-five a:hover { background: var(--tint); }
.gp-five__n {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: var(--text-s);
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.gp-five__main { display: grid; gap: 2px; min-width: 0; }
.gp-five__title { font-size: var(--text-s); font-weight: 600; color: var(--navy); line-height: 1.3; }
.gp-five__who {
  font-size: var(--text-xs);
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-do { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }

/* 44px is Apple's minimum target and about the width of a thumb. A quiet
   control is padded to it rather than set in a bigger typeface, so the
   page looks the same and stops being something you have to aim at. */
.gp-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.gp-quiet:hover { color: var(--navy); }
.gp-quiet--warn { color: var(--amber); }
.gp-sec--navy .gp-quiet { color: rgba(255, 255, 255, 0.86); }

.gp-empty {
  background: #ffffff;
  border: 1px solid var(--rule);
  padding: 28px 26px;
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 62ch;
}

/* --------------------------------------------------- past workshops - */

.gp-past-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.gp-past-list li { border-bottom: 1px solid var(--rule); }
.gp-past-list a, .gp-past-list > li > span {
  display: grid;
  grid-template-columns: 1fr 180px 150px;
  gap: 24px;
  align-items: baseline;
  min-height: 56px;
  padding: 16px 0;
  text-decoration: none;
}
.gp-past-list a:hover { background: var(--tint); padding-inline: 12px; margin-inline: -12px; }
.gp-past-title { font-family: 'Roboto', sans-serif; font-weight: 700; font-size: var(--text-s); color: var(--navy); }
.gp-past-when { font-size: var(--text-xs); color: var(--muted); }
.gp-past-n { font-size: var(--text-xs); color: var(--muted); text-align: right; }

/* ------------------------------------------------------ the phone --- */

@media (max-width: 900px) {
  .grouppage { --gutter: 24px; --section: 64px; }
  .gp-hero__inner { padding: 56px var(--gutter) 48px; }
  .gp-lines > div { grid-template-columns: 1fr; gap: 4px; }
  .gp-past-list a, .gp-past-list > li > span { grid-template-columns: 1fr; gap: 2px; }
  .gp-past-n { text-align: left; }
  .gp-do { gap: 10px; }
  .gp-do .button { width: 100%; text-align: center; }
}

/* =====================================================================
   The contribution form, and the two screens beside it.

   Loaded on cms/sig_contribute.html, which is an ordinary member page
   inside the site's own layout rather than a `grouppage`, so these do not
   depend on the tokens above. The colours are repeated once here on
   purpose: a form that inherits half a system is a form that goes wrong
   the day the other half moves.
   ===================================================================== */

/* `display` beats `hidden`, and every one of these sets `display`. Without
   this the "what you have just chosen" figure and the empty preview image
   are both drawn before anything has been chosen, and the filter box is
   drawn on a page with scripting off where it cannot do anything. */
.pic__has[hidden], .pic__img[hidden], .pic__count[hidden] { display: none; }

.pic { display: grid; gap: 14px; }
.pic__zone {
  display: block;
  border: 2px dashed #c9d4db;
  background: #f8f9fb;
  padding: 26px 24px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pic__zone:hover, .pic--over .pic__zone { border-color: #04633C; background: #ffffff; }
.pic__words { display: block; font-size: 15px; line-height: 1.6; color: #3b6078; max-width: 52ch; }
.pic__words strong { color: #003150; }
.pic__zone input[type="file"] { display: block; margin-top: 14px; font-size: 14px; }
.pic__clear { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #3b6078; }

.pic__has { margin: 0; display: grid; gap: 8px; justify-items: start; }
.pic__img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 340px;
  height: auto;
  border: 1px solid #dde4e8;
}
.pic__cap {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3b6078;
}

.pic__count { display: block; font-size: 13px; color: #3b6078; margin-top: 6px; }
.pic__count--near { color: #8a5a00; }
.pic__count--over { color: #a31212; font-weight: 600; }

.pic__who {
  font-size: 14px;
  line-height: 1.6;
  color: #3b6078;
  background: #f8f9fb;
  border-left: 3px solid #04633C;
  padding: 12px 16px;
  margin: 22px 0;
  max-width: 60ch;
}

/* The row as the group will see it, following the typing. */
.pic__preview { margin-bottom: 24px; position: sticky; top: 100px; }
.pic__card {
  background: #ffffff;
  border: 1px solid #dde4e8;
  padding: 20px;
  margin-top: 10px;
  display: grid;
  gap: 10px;
}
.pic__title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: #003150;
  margin: 0;
}
.pic__who-line { font-size: 13px; color: #3b6078; margin: 0; }
.pic__text {
  font-size: 14px;
  line-height: 1.65;
  color: #3b6078;
  margin: 0;
  white-space: pre-wrap;
  /* A preview that grows without limit pushes the form off the screen. */
  max-height: 260px;
  overflow: hidden;
}
.pic__card .pic__img { max-height: 200px; }

@media (max-width: 900px) {
  .pic__preview { position: static; }
  .pic__text { max-height: none; }
}