/* =============================================================================
   Small groups
   -----------------------------------------------------------------------------
   An overlay on top of site.css rather than a replacement for it: the page's
   structure and behaviour are unchanged, and everything here is about how it
   reads. Loaded only by /small-groups, so nothing else on the site can be
   caught by it.

   The page has one job — help somebody find a room they would be willing to
   walk into — and three things stand between them and that: a week's questions,
   a map, and eleven groups. Each of those is now a surface with an edge, so the
   eye can tell where one ends and the next begins without reading anything.
   ========================================================================== */

/* --- type ------------------------------------------------------------------
   One voice for the headings. The serif italic is the site's signature and it
   earns its place on a hero that is mostly picture, but stacked against a
   directory, a map legend and a form it starts to read as decoration applied at
   random. Here the hierarchy is carried by weight and tracking instead. */

/* This sheet is only ever loaded by this page, so an unqualified selector is
   already scoped to it — no hook needed. Every heading on the page speaks with
   one voice, not two. */
h1 .serif,h2 .serif,h3 .serif{font-family:inherit;font-style:normal;font-weight:inherit;color:inherit}
.banner--sg h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.028em;line-height:1.06}
.section h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.024em;line-height:1.14}
.head.center .kicker,.head .kicker{font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.banner--sg .eyebrow{font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}

/* Section tags: small, tracked, and quiet enough that they label a thing rather
   than compete with it. */
.sgcard__lab,.sgm__lbl{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
/* Tighter tracking than the other tags: two columns on a phone leaves this one
   about 150px, and "Wednesdays · 6:30pm" does not fit on a line at .16em. */
.sgdir__list .kicker{font-size:.58rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

/* --- this week -------------------------------------------------------------
   A widget rather than a heading with a link after it: one surface, its own
   edge, and the two things you can do with it sitting on that surface as pills.
   ========================================================================== */

.sgcard--week{background:var(--card);border:1px solid var(--line);border-radius:20px;
  box-shadow:0 1px 2px rgba(13,37,65,.04),0 12px 30px -18px rgba(13,37,65,.28);
  overflow:hidden;transition:box-shadow .3s var(--ease-out)}
.sgcard--week[open]{box-shadow:0 1px 2px rgba(13,37,65,.05),0 18px 44px -20px rgba(13,37,65,.34)}
.sgcard--week .sgcard__sum{padding:var(--space-md) var(--space-md) var(--space-md) var(--space-lg);
  gap:var(--space-md);align-items:center;border-radius:20px}
.sgcard--week .sgcard__lab{color:var(--cyan-deep)}
.sgcard--week .sgcard__n{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:1.06rem;line-height:1.25;color:var(--ink-strong)}
.sgcard--week .sgcard__meta{color:var(--muted);font-size:.8rem}

/* Both actions are pills, but only one of them is the point. Download is the
   quieter of the two because most people are holding the questions, not
   printing them. */
.sgcard__dl,.sgcard__btn{display:inline-flex;align-items:center;gap:7px;border-radius:99px;
  font-size:.8rem;font-weight:700;line-height:1;padding:10px 15px;white-space:nowrap;
  border:1px solid transparent;text-decoration:none;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .14s var(--ease-out)}
.sgcard__dl{background:var(--cream);color:var(--ink-strong);border-color:var(--line)}
.sgcard__btn{background:var(--navy);color:#fff}
.sgcard__dl:hover{background:var(--cream-2)}
.sgcard__btn:hover{background:color-mix(in srgb,var(--navy) 88%,#fff)}
.sgcard__dl:active,.sgcard__btn:active{transform:scale(.96)}
.sgcard__chev{transition:transform .3s var(--ease-out)}
.sgcard--week[open] .sgcard__chev{transform:rotate(180deg)}

/* --- the map ---------------------------------------------------------------
   Framed, so it reads as a picture of the neighbourhood rather than a hole cut
   in the page. The tiles are CartoDB Positron already — muted enough that the
   circles are the only colour on it.
   ========================================================================== */

.sgmap{border-radius:20px;overflow:hidden;position:relative;isolation:isolate;
  border:1px solid var(--line);background:var(--cream);
  box-shadow:0 1px 2px rgba(13,37,65,.05),0 18px 40px -22px rgba(13,37,65,.35)}
/* Leaflet paints tiles to the very edge, and a 1px border over a moving surface
   shimmers. The inset ring sits above the tiles instead. */
.sgmap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:400;
  border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(13,37,65,.10)}
.sgmap__canvas{border-radius:inherit}
.sgmap__note{color:var(--muted);font-size:.8rem}
.leaflet-container{font-family:var(--font-display)}
.leaflet-popup-content-wrapper{border-radius:14px;box-shadow:0 16px 40px -16px rgba(13,37,65,.45)}
.leaflet-popup-content{margin:12px 14px;font-size:.86rem;line-height:1.5}
.leaflet-popup-content strong{display:block;font-weight:700;color:var(--ink-strong);margin-bottom:2px}
.leaflet-popup-content span{color:var(--muted);font-size:.8rem}
.sgpop__go{display:inline-block;margin-top:7px;font-weight:700;font-size:.8rem;color:var(--cyan-deep)}
.leaflet-control-zoom a{border-radius:10px !important;color:var(--ink-strong) !important}

/* --- the directory ---------------------------------------------------------
   Eleven cards, and the thing that decides whether somebody joins one is
   usually the night of the week. So the day and time come first, as a pill, and
   the name is the loudest thing after it. The area and the leaders sit under
   both, in that order, because you pick a night, then a room, then find out
   whose room it is.
   ========================================================================== */

.sgdir{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(13,37,65,.04),0 14px 34px -22px rgba(13,37,65,.3);
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s}
@media (hover:hover){
  .sgdir:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cyan) 34%,var(--line));
    box-shadow:0 1px 2px rgba(13,37,65,.05),0 22px 44px -22px rgba(13,37,65,.4)}
}
.sgdir__photo{margin:0;overflow:hidden;background:var(--cream-2)}
.sgdir__photo img{display:block;width:100%;height:100%;object-fit:cover}
.sgdir > .sgdir__body{padding:var(--space-md)}

/* The night, as a tag rather than a line of text. */
.sgdir__list .kicker{display:inline-block;margin:0 0 9px;padding:5px 9px;border-radius:99px;
  line-height:1.35;
  background:color-mix(in srgb,var(--cyan) 12%,var(--paper));
  color:var(--cyan-deep);border:1px solid color-mix(in srgb,var(--cyan) 22%,transparent)}

.sgdir h3{margin:0 0 5px;font-family:var(--font-display);font-weight:700;letter-spacing:-.018em;
  font-size:1.02rem;line-height:1.25}
.sgdir__go{font:inherit;color:var(--ink-strong);background:none;border:0;padding:0;text-align:left;
  cursor:pointer;transition:color .2s var(--ease-out)}
.sgdir__go:hover{color:var(--cyan-deep)}
.sgdir__where{margin:0;font-size:.85rem;line-height:1.45;color:var(--muted)}
.sgtag{display:inline-block;margin-left:5px;padding:2px 8px;border-radius:99px;
  background:var(--cream-2);color:var(--muted);font-size:.66rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
.sgdir__soon{margin:7px 0 0;font-size:.78rem;font-weight:700;color:var(--cyan-deep)}
/* The leaders are the quietest line on the card and the last one, because a
   name means nothing until you have decided you might come. */
.sgdir__who{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:.8rem;line-height:1.5;color:var(--muted)}

/* --- the sheet -------------------------------------------------------------
   It already drags and dismisses like a sheet. This is the rest of the costume:
   a handle you can see, a corner radius that says card-over-page, and a veil
   that blurs what is behind rather than merely darkening it.
   ========================================================================== */

.sgm__veil{background:rgba(9,20,34,.42);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.sgm__panel{border-radius:28px 28px 0 0;background:var(--paper);
  box-shadow:0 -8px 60px -12px rgba(9,20,34,.5)}
@media (min-width:521px){ .sgm__panel{border-radius:28px} }
.sgm__x{border-radius:99px}

.sgm__head{gap:var(--space-md)}
.sgm__photo{border-radius:14px;object-fit:cover}
.sgm__group{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-deep);margin:0 0 4px}
.sgm__head h3{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:1.2rem;line-height:1.2}
.sgm__where{margin:4px 0 0;font-size:.85rem;color:var(--muted)}
.sgm__lbl{color:var(--muted)}
.sgm__sec{margin-top:var(--space-lg)}

/* --- the form --------------------------------------------------------------
   Two radio buttons asking how somebody would like to be replied to is a
   question with two answers, which is a switch. So it is drawn as one.
   ========================================================================== */

/* A legend cannot be laid out with the rest of a flex fieldset — float it and
   it lands inside the track it is supposed to be labelling. Lifted out of flow
   entirely instead, with room made for it above. */
.sgm__how{position:relative;border:0;padding:0;margin:26px 0 var(--space-md);min-width:0}
.sgm__how legend{position:absolute;top:-23px;left:2px;width:auto;padding:0;
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.04em}
.sgm__how label{position:relative;flex:1 1 0;display:flex;align-items:center;justify-content:center;
  gap:6px;padding:9px 12px;border-radius:99px;font-size:.86rem;font-weight:600;
  color:var(--muted);cursor:pointer;user-select:none;z-index:1;
  transition:color .22s var(--ease-out)}
.sgm__how input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}

@supports selector(:has(*)){
  .sgm__how{display:flex;gap:4px;background:var(--cream-2);border-radius:99px;padding:4px}
  .sgm__how label:has(input:checked){background:var(--card);color:var(--ink-strong);
    box-shadow:0 1px 2px rgba(13,37,65,.14),0 2px 8px rgba(13,37,65,.08)}
  .sgm__how label:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:2px}
}
/* Without :has() the switch cannot know which half is on, so it stays two plain
   radios rather than a control that looks live and is not. */
@supports not selector(:has(*)){
  .sgm__how input{position:static;opacity:1;width:auto;height:auto;accent-color:var(--cyan-deep)}
}

.sgm__f{display:block;margin-bottom:var(--space-md)}
.sgm__f > span{display:block;font-size:.72rem;font-weight:700;color:var(--muted);
  letter-spacing:.04em;margin-bottom:6px}
.sgm__f input,.sgm__f textarea{width:100%;font-family:inherit;font-size:1rem;line-height:1.5;
  color:var(--ink-strong);background:#f3f4f6;border:1px solid transparent;border-radius:14px;
  padding:12px 14px;
  transition:background .2s var(--ease-out),border-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.sgm__f textarea{resize:none;min-height:104px}
.sgm__f ::placeholder{color:#9aa3ad}
.sgm__f input:focus,.sgm__f textarea:focus{outline:0;background:var(--card);
  border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 20%,transparent)}

.sgm__send{width:100%;justify-content:center;border-radius:99px;padding:15px;
  font-size:.98rem;font-weight:700;letter-spacing:-.01em;
  box-shadow:0 12px 26px -10px rgba(13,37,65,.5);
  transition:transform .13s var(--ease-out),background .2s var(--ease-out)}
.sgm__send:active{transform:scale(.965)}
.sgm__err{margin:0 0 var(--space-sm);font-size:.84rem;color:#a3241f}
.sgm__done{font-size:.92rem;line-height:1.6}

@media (prefers-reduced-motion:reduce){
  .sgdir,.sgcard--week,.sgcard__dl,.sgcard__btn,.sgm__send,.sgcard__chev{transition:none}
  .sgdir:hover{transform:none}
}


/* --- dark -------------------------------------------------------------------
   This sheet loads after site.css and sets its own light values, so the page
   tokens never reached it. The message fields were the worst of it: a #f3f4f6
   box carrying --ink-strong, which in the dark is near-white type on a
   near-white field. Anything typed into it would have been invisible.

   Leaflet brings its own furniture as well - zoom buttons, attribution and
   popups are all its stylesheet's white, and only the type inside them was
   ever ours. The basemap itself switches in smallgroups.js. */
html.dark .sgm__f input,
html.dark .sgm__f textarea{
  background:color-mix(in srgb,var(--ink) 6%,var(--card));
  border-color:var(--line);
  color:var(--ink);
}
html.dark .sgm__f input:focus,
html.dark .sgm__f textarea:focus{background:color-mix(in srgb,var(--ink) 9%,var(--card));}
html.dark .sgm__f ::placeholder{color:color-mix(in srgb,var(--ink) 52%,transparent);}
html.dark .sgm__err{color:#ff9d95;}

html.dark .leaflet-container{background:#0a1420;}
html.dark .leaflet-bar,
html.dark .leaflet-bar a{border-color:#2b3648;}
html.dark .leaflet-control-zoom a{background:#12202f;color:var(--ink) !important;}
html.dark .leaflet-control-zoom a:hover{background:#1a2b3d;}
html.dark .leaflet-control-zoom a.leaflet-disabled{background:#0e1826;color:#5a6472 !important;}
html.dark .leaflet-control-attribution{background:rgba(10,20,32,.84);color:#9aa2ad;}
html.dark .leaflet-control-attribution a{color:#7fd6ea;}
html.dark .leaflet-popup-content-wrapper,
html.dark .leaflet-popup-tip{background:var(--card);color:var(--ink);box-shadow:0 16px 40px -16px rgba(0,0,0,.7);}
html.dark .leaflet-popup-close-button{color:var(--muted) !important;}