/* ---------------------------------------------------------------------------
   Colours.

   One set of tokens, redefined for dark screens. Nothing below this block
   names a colour directly, so both themes stay in step.
--------------------------------------------------------------------------- */
/* Taken from Onsite IT Solutions' own site, not matched by eye: these are the
   values its stylesheet sets on :root, so the handbook and the company site
   stay the same blue without anybody keeping two lists in step.

     --c-brand #1063d6   --c-brand-hi #3b86f0   --c-brand-soft #e9f1fd
     --c-ink   #0b0d12   --c-muted    #515c6e   --c-subtle     #7b8698
     --c-line  #e3e8ef   --c-bg-soft  #f5f7fa   --c-ink-line   #232733

   Dark is what everybody gets, whatever their computer is set to. The switch
   in the top corner moves the page to light and remembers the answer, so a
   reader who prefers paper only has to say so once.                        */
:root {
  --ink:        #f3f5f9;
  --body:       #c3cad3;
  --muted:      #8e98a4;
  --paper:      #0b0d12;
  --card:       #141821;
  --line:       #232733;
  --line-soft:  #1b202a;
  --brand:      #3b86f0;
  --accent:     #3b86f0;
  --accent-ink: #6aa6f5;
  --accent-bg:  #121d2e;
  --on-accent:  #06182f;
  --warn-bg:    #2a2317;
  --warn-line:  #c79a44;
  --stop-bg:    #2b1d1c;
  --stop-line:  #c9655a;
  --ok-bg:      #1b241e;
  --ok-line:    #6fa77b;
  --shot-mat:   #2a313b;
  --shade:      0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.28);
  --logo-ink:   #ffffff;
  /* A box you type into, sunk below the band it sits on. In the dark it is
     the page's own ground, which is darker than the banner. */
  --field:      #0a0d13;
}

/* The light half. Also what the page prints as, because nobody wants a black
   page out of an office printer. */
:root[data-theme='light'], html.printing {
  --ink:        #0b0d12;
  --body:       #515c6e;
  --muted:      #7b8698;
  --paper:      #f5f7fa;
  --card:       #ffffff;
  --line:       #e3e8ef;
  --line-soft:  #f1f4f8;
  --brand:      #1063d6;
  --accent:     #1063d6;
  --accent-ink: #0b4ca8;
  --accent-bg:  #e9f1fd;
  --on-accent:  #ffffff;
  --warn-bg:    #fdf4e3;
  --warn-line:  #b8842b;
  --stop-bg:    #fbeceb;
  --stop-line:  #b0443a;
  --ok-bg:      #edf3ee;
  --ok-line:    #4c7a56;
  --shot-mat:   #e9ecf2;
  --shade:      0 1px 2px rgba(23,32,43,.06), 0 6px 18px rgba(23,32,43,.06);
  --logo-ink:   #000000;
  --field:      #ffffff;
}
@media print {
  :root {
    --ink: #0b0d12; --body: #22272f; --muted: #515c6e;
    --paper: #ffffff; --card: #ffffff;
    --line: #c9d0da; --line-soft: #e3e8ef;
    --brand: #1063d6; --accent: #0b4ca8; --accent-ink: #0b4ca8;
    --accent-bg: #eef3fb; --on-accent: #ffffff;
    --warn-bg: #fdf4e3; --warn-line: #b8842b;
    --stop-bg: #fbeceb; --stop-line: #b0443a;
    --ok-bg: #edf3ee; --ok-line: #4c7a56;
    --shot-mat: #e9ecf2; --shade: none; --logo-ink: #000000; --field: #ffffff;
  }
}

/* --- the page ----------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: "Atkinson Hyperlegible", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

/* Manrope, to sit beside the rounded geometric letters of the Onsite mark.
   The reading underneath stays Atkinson Hyperlegible, which is drawn to be
   read by people who find most type hard going. */
h1, h2, h3, h4 {
  font-family: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  text-wrap: balance;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- masthead ------------------------------------------------------------ */
.masthead {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 1rem 2.25rem;
}
/* --- the mark ------------------------------------------------------------
   Written into the page rather than loaded through <img>, so currentColor is
   the page's own: white on the dark handbook, black on the light one.      */
.masthead .mark {
  display: block;
  width: auto;
  height: 64px;
  margin-bottom: 1.75rem;
  color: var(--logo-ink);
}

/* --- the light/dark switch -----------------------------------------------
   Words as well as a symbol: a lone moon means nothing to somebody who has
   not met one before. The label says what pressing it will do.            */
.themer {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 .9rem/1 "Atkinson Hyperlegible", system-ui, sans-serif;
  cursor: pointer;
}
.themer:hover { border-color: var(--accent); color: var(--accent-ink); }
.themer svg { width: 1.05em; height: 1.05em; flex: none; }
.themer span { display: none; align-items: center; gap: .5rem; }
.themer .to-light { display: inline-flex; }
:root[data-theme='light'] .themer .to-light { display: none; }
:root[data-theme='light'] .themer .to-dark { display: inline-flex; }
@media (max-width: 34rem) { .themer { padding: .45rem .7rem; font-size: .82rem; } }

.masthead p.eyebrow {
  margin: 0 0 .5rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.masthead h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); font-weight: 800; }
.masthead p.standfirst {
  margin: .9rem 0 0;
  max-width: 62ch;
  font-size: 1.1rem;
  color: var(--body);
}

/* --- the two columns ----------------------------------------------------- */
.shell {
  max-width: 1140px;
  margin: 0 auto;
  padding: 2.5rem 1rem 5rem;
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 62rem) {
  .shell { grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; }
}

/* --- contents ------------------------------------------------------------
   A plain list, not a <details>. A closed <details> hides its contents in a
   way CSS cannot undo, so the rail went blank on wide screens. On a phone it
   is two short columns instead, which costs a screen and hides nothing.     */
.contents { font-size: .95rem; }
.contents h2 {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  margin-bottom: .6rem;
}
.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem .5rem;
}
.contents li { margin: 0; }
.contents a {
  display: block;
  padding: .3rem .5rem;
  border-radius: 5px;
  color: var(--body);
  text-decoration: none;
  border-left: 3px solid transparent;
}
.contents a:hover { background: var(--accent-bg); color: var(--accent-ink); border-left-color: var(--accent); }
@media (min-width: 62rem) {
  /* The rail sticks; the list scrolls inside it. The search box sits above
     the scrolling part, so its focus ring is not clipped by the scroll box,
     and the results panel can escape the rail altogether. */
  .rail { position: sticky; top: 1.5rem; }
  .contents { max-height: calc(100vh - 9rem); overflow-y: auto; padding: 6px; margin: -6px; }
  .contents ol { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

/* --- content ------------------------------------------------------------- */
main { min-width: 0; }
main > section { margin-bottom: 4rem; scroll-margin-top: 1.5rem; }
main > section:last-child { margin-bottom: 0; }

main h2 {
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
  font-weight: 700;
  padding-bottom: .6rem;
  border-bottom: 3px solid var(--accent);
  margin-bottom: 1.25rem;
}
main h3 { font-size: 1.3rem; font-weight: 600; margin: 2.5rem 0 .75rem; }
main h4 { font-size: 1.08rem; font-weight: 600; margin: 1.75rem 0 .5rem; font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
main p { margin: 0 0 1rem; max-width: 68ch; }
main ul, main ol { max-width: 68ch; margin: 0 0 1rem; padding-left: 1.4rem; }
main li { margin-bottom: .45rem; }
main li > ul, main li > ol { margin-top: .45rem; }

strong { color: var(--ink); font-weight: 700; }
code, kbd {
  font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--accent-bg);
  color: var(--accent-ink);
  padding: .1em .4em;
  border-radius: 4px;
}

/* A button you press in the admin, named the way it is written there. */
.btn {
  display: inline-block;
  font-weight: 700;
  color: var(--ink);
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: .05em .45em;
  font-size: .94em;
  white-space: nowrap;
}

/* --- numbered steps ------------------------------------------------------ */
ol.steps { list-style: none; padding: 0; counter-reset: step; max-width: 68ch; }
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.1rem;
  min-height: 2rem;
}
ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .05rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}

/* --- callouts ------------------------------------------------------------ */
.note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-left: 5px solid var(--warn-line);
  background: var(--warn-bg);
  border-radius: 0 8px 8px 0;
  max-width: 68ch;
}
.note.stop { border-left-color: var(--stop-line); background: var(--stop-bg); }
.note.ok { border-left-color: var(--ok-line); background: var(--ok-bg); }
.note > :last-child { margin-bottom: 0; }
.note p.label {
  margin: 0 0 .3rem;
  font-weight: 700;
  color: var(--ink);
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- screenshots --------------------------------------------------------- */
figure {
  margin: 1.75rem 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem;
  box-shadow: var(--shade);
  /* Never wider than the picture inside it, so a small screenshot is not
     blown up inside a full-width card and left looking soft. */
  width: fit-content;
  max-width: 100%;
}
figure img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  background: var(--shot-mat);
}
figcaption {
  margin-top: .7rem;
  padding: 0 .3rem;
  font-size: .92rem;
  color: var(--muted);
}

/* --- what each button does ----------------------------------------------- */
dl.buttons { max-width: 68ch; margin: 1.25rem 0; }
dl.buttons > div {
  display: grid;
  gap: .15rem .9rem;
  padding: .65rem 0;
  border-top: 1px solid var(--line-soft);
}
@media (min-width: 34rem) { dl.buttons > div { grid-template-columns: 11rem minmax(0, 1fr); } }
dl.buttons dt { font-weight: 700; color: var(--ink); }
dl.buttons dd { margin: 0; }

/* --- a plain table ------------------------------------------------------- */
.scroller { overflow-x: auto; margin: 1.5rem 0; max-width: 68ch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink); font-weight: 700; background: var(--line-soft); }

/* --- questions ----------------------------------------------------------- */
.qa { max-width: 68ch; margin: 1.25rem 0; display: grid; gap: .6rem; }
.qa details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: .4rem 1rem;
}
.qa summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: .6rem 0; }
.qa details[open] summary { border-bottom: 1px solid var(--line-soft); margin-bottom: .6rem; }
.qa details > :last-child { margin-bottom: .6rem; }

/* --- search --------------------------------------------------------------
   The handbook is one page, so the browser's own Ctrl+F already works. This
   is for the reader who has never used it: a box that says what it is, and
   results that name the section they are in.                               */
.finder { margin-bottom: 1rem; }
.finder input {
  width: 100%;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  font: 400 .95rem/1.3 "Atkinson Hyperlegible", system-ui, sans-serif;
}
.finder input::placeholder { color: var(--muted); }
.finder input:focus-visible { border-color: var(--accent); }

/* On a wide screen the results are a panel over the page, not a column
   squeezed into the rail: eight results at 240px wide is six words a line
   and nothing readable. On a phone there is no room beside anything, so they
   sit under the box as an ordinary block. */
.found { margin-bottom: 1.25rem; }
.found ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; grid-template-columns: minmax(0, 1fr); }
.found a {
  text-decoration: none;
  display: block;
  width: 100%;
  text-align: left;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--body);
  font: inherit;
  cursor: pointer;
}
.found a:hover, .found a:focus-visible { border-color: var(--accent); background: var(--accent-bg); }
.found .where {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.found .what { display: block; font-weight: 700; color: var(--ink); font-size: .95rem; }
.found .bit { display: block; font-size: .85rem; color: var(--muted); margin-top: .2rem; }
.found mark { background: var(--accent-bg); color: var(--accent-ink); font-weight: 700; padding: 0 .1em; border-radius: 2px; }

/* Said to a screen reader, not drawn. The result count belongs in the
   banner's markup but not in its picture. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- the banner, with the search in its corner ---------------------------
   The search belongs to the whole handbook, not to the contents list, so it
   sits in the banner beside the title rather than at the top of the rail.
   The results drop out of the banner and over the page, which is where
   there is room to read them.                                             */
.masthead > div {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
}
.masthead .home { grid-column: 1; }
.masthead .eyebrow { grid-column: 1; }
.masthead h1 { grid-column: 1; }
.masthead .themer { justify-self: end; }
.masthead .finder { margin: 1.5rem 0 0; }

@media (min-width: 48rem) {
  .masthead > div {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 2.5rem;
  }
  .masthead .themer { grid-column: 2; grid-row: 1; }
  .masthead .finder {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
    width: min(22rem, 34vw);
    margin: 0;
  }
}

.finder label {
  display: block;
  margin-bottom: .4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The results hang off the banner, right-aligned under the box. */
@media (min-width: 48rem) {
  .found {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    left: auto;
    width: min(38rem, 100%);
    max-height: min(32rem, calc(100vh - 12rem));
    overflow-y: auto;
    margin: 0;
    padding: .75rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shade), 0 18px 40px rgba(0, 0, 0, .28);
    z-index: 30;
  }
}