/* The glossary of moments, on /applications, and nowhere else.

   Its own sheet rather than more of style.css, which all 69 pages download
   and which sits at 30,024 bytes gzipped against a 30,720 cap. */

/* ---- where each one breaks ---- */

.sg-spread { margin: 3.5rem 0; }
.sg-note {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 36em;
  margin: 0.6rem 0 1.4rem;
}

/* A wide table on a narrow phone scrolls inside its own box. The page body
   never scrolls sideways. */
.sg-scroll { overflow-x: auto; }

.sg-table { border-collapse: collapse; width: 100%; min-width: 34rem; }
.sg-table th, .sg-table td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.92rem;
}
.sg-table thead th {
  font-family: "Anton", sans-serif;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--bronze);
}
.sg-table tbody th { font-weight: 500; color: var(--ink); }
.sg-table tbody th a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.sg-table tbody th a:hover { border-bottom-color: var(--gold); }
.sg-table td { color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-nil { color: var(--bronze); font-size: 0.82rem; }

/* ---- the glossary ---- */

.sg { margin: 3.5rem 0 1rem; }

.sg-dim { margin-top: 3rem; border-top: 2px solid var(--bronze); padding-top: 1.4rem; }
.sg-dim-h {
  font-family: "Anton", sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.sg-dim-one { font-size: 1rem; color: var(--muted); margin-top: 0.3rem; }

.sg-sub { margin-top: 2rem; }
.sg-sub-h {
  font-family: "Anton", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.sg-sub-def { font-size: 0.92rem; line-height: 1.6; color: var(--muted); margin-top: 0.25rem; }

.sg-list { list-style: none; margin-top: 0.8rem; }
/* An entry is two lines. The head is the compound a reader scans, situation
   then label. The sentence under it is in their own voice and is what somebody
   reads to be sure they have found themselves, so it is set quieter and
   indented to the label rather than competing with it. */
.sg-list li { border-top: 1px solid var(--hairline); padding: 0.85rem 0; }

.sg-head {
  display: flex;
  gap: 0.4rem 1rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.sg-where {
  font-family: "Anton", sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
  flex: 0 0 9rem;
}
.sg-label { font-size: 1.02rem; line-height: 1.5; color: var(--ink); flex: 1 1 18rem; }
.sg-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
  font-style: italic;
  margin: 0.25rem 0 0 10rem;
}

/* A gap in the glossary, said out loud. Bronze rather than grey, because it
   is a thing to be written rather than a thing to be ignored. */
.sg-empty {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--bronze-text, var(--bronze));
  font-style: italic;
  margin-top: 0.7rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--bronze);
}

@media (max-width: 34rem) {
  .sg-dim-h { font-size: 1.24rem; }
  .sg-where { flex-basis: 100%; }
  .sg-text { margin-left: 0; }
}

/* ---- one situation's page ---- */

/* Where it breaks, as five bars. Bronze rather than gold: this is a
   description of a room, not a step somebody takes. Gold stays for forward
   motion. */

.sit-spread { margin: 3.5rem 0; }
.sit-bars { list-style: none; margin-top: 1.4rem; }

.sit-bar {
  display: grid;
  grid-template-columns: 8rem 1fr 4.5rem;
  gap: 0.4rem 1rem;
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding: 0.9rem 0;
}
.sit-bar-name {
  font-family: "Anton", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sit-bar-name a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.sit-bar-name a:hover { border-bottom-color: var(--gold); }

.sit-bar-track { height: 4px; background: var(--hairline); border-radius: 2px; overflow: hidden; }
.sit-bar-fill { display: block; height: 100%; background: var(--bronze); }
.sit-bar-n {
  font-size: 0.86rem;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sit-bar-one {
  grid-column: 1 / -1;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
}

/* A dimension a room cannot reach at all. Stated, not dimmed into
   invisibility: writing having no Delivery is the clearest evidence on the
   site that these are real categories. */
.sit-bar-nil .sit-bar-name a { color: var(--muted); }
.sit-bar-nil .sit-bar-n { color: var(--bronze); font-size: 0.78rem; }

/* ---- the moments in this room ---- */

.sit-moments { margin: 3.5rem 0; }
.sit-group { margin-top: 2.2rem; }
.sit-group-h {
  font-family: "Anton", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.sit-group-sub { color: var(--gold); margin-left: 0.6rem; }
.sit-group-def { font-size: 0.9rem; line-height: 1.6; color: var(--muted); margin-top: 0.25rem; }

.sit-list { list-style: none; margin-top: 0.8rem; }
.sit-list li { border-top: 1px solid var(--hairline); padding: 0.85rem 0; }
.sit-label { font-size: 1.05rem; line-height: 1.5; color: var(--ink); }
.sit-text { font-size: 0.92rem; line-height: 1.55; color: var(--muted); font-style: italic; margin-top: 0.25rem; }

@media (max-width: 34rem) {
  .sit-bar { grid-template-columns: 1fr 3.6rem; }
  .sit-bar-track { grid-column: 1 / -1; order: 3; }
  .sit-bar-one { order: 4; }
}