/*
 * THE HELP FRAME. Every page under /help wears this: the landing page, each shelf and,
 * once the admin catalogue is generated into static pages, every article.
 *
 * It is a FILE rather than inline styles because there will be dozens of these pages and
 * they must stay identical - the marketing page keeps its own inline block because it is
 * one page and loads before anything else. The token block below is therefore the one
 * deliberate duplication in this repo: change a colour on the marketing page and change it
 * here. A help page that drifts from the site it belongs to looks like a different company.
 */

:root {
  --paper:      #F3F2EF;
  --paper-2:    #E8E7E1;
  --card:       #FCFCFA;
  --ink:        #16191C;
  --ink-2:      #4A5560;
  --ink-3:      #79838C;
  --slate:      #2E3A45;
  --slate-soft: #DDE1E4;
  --rule:       #D3D2CA;
  --rule-hard:  #B4B3A9;
  --brass:      #8E5F18;
  --brass-ink:  #FFFFFF;
  --brass-soft: #F0E4CE;
  --moss:       #3F5F45;
  --moss-soft:  #DDE7DC;

  --grid-line:  rgba(46, 58, 69, 0.07);

  --sans: "Public Sans", ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --slab: "Zilla Slab", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --sheet: 1140px;
  --col:   68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #14181B;
    --paper-2:    #1A2025;
    --card:       #1D242A;
    --ink:        #ECEDE9;
    --ink-2:      #AAB4BB;
    --ink-3:      #7E888F;
    --slate:      #C3CDD5;
    --slate-soft: #2A343B;
    --rule:       #2D363C;
    --rule-hard:  #3E4950;
    --brass:      #D8A860;
    --brass-ink:  #16191C;
    --brass-soft: #382D1A;
    --moss:       #93B79A;
    --moss-soft:  #212E24;

    --grid-line:  rgba(195, 205, 213, 0.07);
  }
}

:root[data-theme="dark"] {
  --paper:      #14181B;
  --paper-2:    #1A2025;
  --card:       #1D242A;
  --ink:        #ECEDE9;
  --ink-2:      #AAB4BB;
  --ink-3:      #7E888F;
  --slate:      #C3CDD5;
  --slate-soft: #2A343B;
  --rule:       #2D363C;
  --rule-hard:  #3E4950;
  --brass:      #D8A860;
  --brass-ink:  #16191C;
  --brass-soft: #382D1A;
  --moss:       #93B79A;
  --moss-soft:  #212E24;

  --grid-line:  rgba(195, 205, 213, 0.07);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--slab);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.012em;
}

p { margin: 0; }
a { color: inherit; }

.sheet {
  max-width: var(--sheet);
  margin-inline: auto;
  padding-inline: 28px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border: 1px solid var(--rule-hard);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip.live { color: var(--moss); border-color: var(--moss); background: var(--moss-soft); }
.chip.build { color: var(--brass); border-color: var(--brass); background: var(--brass-soft); }

/* ---------- masthead, as the marketing page wears it ---------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}
.masthead-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  padding-block: 13px;
}
.wordmark {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.wordmark .by {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 10px;
  vertical-align: 2px;
}
.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 13.5px;
  font-weight: 500;
}
.masthead nav a { color: var(--ink-2); text-decoration: none; }
.masthead nav a:hover,
.masthead nav a[aria-current="page"] { color: var(--brass); }
@media (max-width: 780px) { .masthead nav { display: none; } }

.masthead .sign-in {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule-hard);
  border-radius: 2px;
  padding: 8px 14px;
  white-space: nowrap;
}
.masthead .sign-in:hover { border-color: var(--brass); color: var(--brass); }
.masthead nav + .sign-in { margin-left: 0; }
@media (max-width: 780px) { .masthead nav + .sign-in { margin-left: auto; } }

/* ---------- page head ---------- */

.doc-head {
  padding-block: 56px 44px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  background-position: center top;
  border-bottom: 1px solid var(--rule);
}
.doc-head h1 {
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 700;
  letter-spacing: -0.026em;
  margin-block: 18px 18px;
}
.doc-head .lede {
  max-width: 62ch;
  font-size: clamp(17px, 1.6vw, 19px);
  color: var(--ink-2);
}

/* A trail, not a breadcrumb bar: one line of small type above the title. */
.trail {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.trail a { color: var(--ink-3); text-decoration: none; }
.trail a:hover { color: var(--brass); }
.trail .sep { opacity: 0.5; margin-inline: 8px; }

/* ---------- search ---------- */

.search {
  margin-top: 30px;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--rule-hard);
  border-radius: 2px;
  padding: 0 14px;
}
.search:focus-within { border-color: var(--brass); }
.search svg { flex: none; color: var(--ink-3); }
.search input {
  flex: 1;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  padding-block: 13px;
}
.search input:focus { outline: none; }
.search input::placeholder { color: var(--ink-3); }
.search .count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---------- the four shelves ---------- */

main { padding-block: 56px 90px; }

.shelves {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 860px) { .shelves { grid-template-columns: 1fr; } }

.shelf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}
.shelf:hover { border-color: var(--brass); transform: translateY(-2px); }
.shelf:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .shelf { transition: none; } .shelf:hover { transform: none; } }

/* The icon is drawn, never a glyph from a font or an emoji: it has to sit on the
   same optical grid as the rule lines around it. */
.shelf .mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-hard);
  color: var(--brass);
  flex: none;
}
/* A GROUP HEADING WITHIN ONE SHELF - the Events shelf is divided into
   everyday events and the ministry's flagship event. The shared
   h1,h2,h3,h4 rule above gives the slab face and `margin: 0`, and nothing
   else, so without these two a group heading draws at the browser's
   default size with no space above it and its blurb reads as body text. */
.shelf-group {
  font-size: 22px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
/* The first group sits right under the shelf's own lede, which already
   has space below it. */
main > .shelf-group:first-child {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}
.shelf-group__blurb {
  color: var(--ink-2);
  font-size: 15.5px;
  margin: 6px 0 12px;
  max-width: 60ch;
}
.shelf h2 { font-size: 23px; }
.shelf .blurb { color: var(--ink-2); font-size: 15.5px; }
.shelf .foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.shelf .go {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
}

/* ---------- search results, in place of the shelves ---------- */

.results { display: flex; flex-direction: column; gap: 2px; }
.result {
  display: block;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--rule);
  text-decoration: none;
}
.result:hover { border-color: var(--brass); }
.result .where {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.result h3 { font-size: 18px; margin-block: 5px 4px; }
.result .blurb { color: var(--ink-2); font-size: 14.5px; }

/* ---------- an article ---------- */

/* Shared by the generated admin articles and the hand-written ones, so a reader cannot
   tell which is which. A page that wears its own styles is a page that drifts. */
.article { max-width: var(--col); display: flex; flex-direction: column; gap: 20px; color: var(--ink-2); }
.article h2 { font-size: 26px; color: var(--ink); margin-top: 24px; }
.article strong { color: var(--ink); font-weight: 600; }
.article dl { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.article dt { font-family: var(--slab); font-weight: 600; font-size: 18px; color: var(--ink); }
.article dd { margin: 4px 0 0; }

/* A FIELD REFERENCE: one row per control, its name and what it means. Each pair is wrapped
   in a div - HTML allows that inside a dl - because a flex gap applies between every child,
   so a bare run of dt/dd separates the name from its own meaning as much as from the next
   field's, and the list reads as one undifferentiated column. */
.article dl.fields { gap: 0; }
.fields > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 4px 24px;
  padding-block: 13px;
  border-top: 1px solid var(--rule);
}
.fields > div:first-child { border-top: 0; }
.fields > div > dt { font-size: 16px; }
.fields > div > dd { margin: 0; }
@media (max-width: 720px) {
  .fields > div { grid-template-columns: 1fr; }
}

figure { margin: 10px 0; max-width: 100%; }
/* max-width, NOT width: the 277 admin figures are scripted screenshots at whatever size the
   thing they show happens to be - a narrow menu, a wide table. Stretching a small one to the
   column blurs it, and a reader reading a blurred screenshot assumes the app looks like that. */
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  background: var(--card);
}
/* A drawn diagram has no native size and should fill. */
figure svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  background: var(--card);
}
figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }

/* THE STEPS ARE THE POINT: somebody reading this is stuck part-way through a task, so the
   act is the thing the eye lands on and the detail sits under it in lighter type. */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 18px; }
.steps > li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brass);
  padding-top: 5px;
}
.steps .act { color: var(--ink); font-weight: 600; }
.steps .detail { margin-top: 4px; font-size: 15.5px; }
.steps figure { margin-top: 12px; }

/* Said ONCE above the pictures on a page that has any: the screens shown are an example
   ministry's. The figures deliberately stay as they are (re-shooting 277 of them per ministry is
   hours; a real console teaches better than a blank one), so this line is what keeps them honest
   for every ministry reading its own help. Quieter than a .note - it is a standing fact about the
   pictures, not a warning about what you are doing. */
.figure-note {
  font-size: 14.5px;
  color: var(--ink-3);
  border-left: 2px solid var(--rule-hard);
  padding: 2px 0 2px 14px;
}

/* A warning and an aside must not look alike: one has consequences. */
.note {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border-left: 2px solid var(--rule-hard);
  background: var(--paper-2);
}
.note .kind {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.note.watch { border-left-color: var(--brass); }
.note.watch .kind { color: var(--brass); }

.seealso { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.seealso h2 { font-size: 20px; }
.seealso a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule-hard); width: fit-content; }
.seealso a:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- the reader guide, as captured ---------- */

/* These class names come from the reader app's own templates: its guide pages are captured
   and published here, so the markup is theirs and only the styling is ours. Styled to match
   the generated admin articles, so a reader cannot tell one shelf from another. The list is
   short on purpose - if the reader's guide grows a new wrapper, it arrives here unstyled
   rather than broken, which is the right way round. */

.article .guide-section { display: flex; flex-direction: column; gap: 16px; }
.article .guide-section + .guide-section { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }
.article .guide-section h3 { font-family: var(--slab); font-weight: 600; font-size: 26px; color: var(--ink); margin: 0; }
.article .guide-section h4 { font-family: var(--slab); font-weight: 600; font-size: 18px; color: var(--ink); margin: 10px 0 0; }
.article ul, .article ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.article li { padding-left: 2px; }

/* The app's "tip" box. Its lightbulb is dropped on the way in - a ligature with no font
   renders as the word - so the rule and the ground do the work instead. */
.help-callout {
  padding: 14px 16px;
  border-left: 2px solid var(--brass);
  background: var(--paper-2);
  color: var(--ink-2);
}
.help-callout > div { margin: 0; }

.help-img { margin: 4px 0; }
.help-img img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--rule);
  background: var(--card);
}
.help-img figcaption { margin-top: 10px; font-size: 14px; color: var(--ink-3); }

/* A desktop still and a phone still shown side by side - the same thing, two shapes. They
   stack on a narrow screen, where sitting them side by side would make both unreadable. */
.help-img__row { display: flex; gap: 16px; align-items: flex-start; }
.help-img__row img { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .help-img__row { flex-direction: column; } }

.help-link { color: var(--ink); border-bottom: 1px solid var(--rule-hard); text-decoration: none; }
.help-link:hover { color: var(--brass); border-color: var(--brass); }

/* ---------- a shelf's contents ---------- */

.group { margin-bottom: 44px; }
.group > h2 { font-size: 24px; margin-bottom: 6px; }
.group > .blurb { color: var(--ink-2); max-width: var(--col); margin-bottom: 18px; }

.empty {
  padding: 34px 0;
  color: var(--ink-2);
  max-width: var(--col);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.empty strong { color: var(--ink); font-weight: 600; }

[hidden] { display: none !important; }

/* ---------- foot ---------- */

.doc-foot {
  border-top: 1px solid var(--rule);
  padding-block: 30px 60px;
  color: var(--ink-3);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.doc-foot a { color: var(--ink-2); text-decoration: none; }
.doc-foot a:hover { color: var(--brass); }