/* ==========================================================================
   Bryder Holdings Ltd, helpdesk.css
   Styles for /staff/help/ and nothing else.

   This page deliberately does NOT look like the rest of the site. It is an
   intranet page about Microsoft 365, so it borrows the Fluent conventions
   people already know from SharePoint and the M365 apps: Segoe UI, the
   communication blue, near-square corners, flat neutral greys and the small
   two-layer Fluent shadow.

   It is a separate stylesheet rather than a section of site.css because it
   shares nothing with the brand: no Fraunces, no Inter, no green, no pill
   buttons, no theme tokens. Keeping them apart also means this page loads no
   webfonts at all, which is both faster and more authentic. Segoe UI is
   already on every Windows machine, and the stack falls through to the
   system UI face everywhere else.

   No dark mode on purpose. SharePoint pages do not have one, and the point
   here is that this reads as a tool rather than as part of ridder.nz.
   ========================================================================== */

:root {
  --ms-blue:        #0078D4;
  --ms-blue-hover:  #106EBE;
  --ms-blue-press:  #005A9E;
  --ms-blue-tint:   #DEECF9;

  --ms-bg:          #FAF9F8;
  --ms-surface:     #FFFFFF;
  --ms-line:        #EDEBE9;
  --ms-line-strong: #D2D0CE;

  --ms-text:        #323130;
  --ms-text-2:      #605E5C;
  --ms-suite:       #201F1E;

  --ms-red:         #A4262C;
  --ms-amber:       #FFB900;

  --ms-radius: 2px;
  /* Fluent depth 4 and 8. */
  --ms-shadow-4: 0 1.6px 3.6px rgba(0,0,0,.132), 0 .3px .9px rgba(0,0,0,.108);
  --ms-shadow-8: 0 3.2px 7.2px rgba(0,0,0,.132), 0 .6px 1.8px rgba(0,0,0,.108);

  --ms-font: "Segoe UI", "Segoe UI Web (West European)", -apple-system,
             BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", Arial,
             sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--ms-bg);
  color: var(--ms-text);
  font-family: var(--ms-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--ms-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding: 0; }

:focus-visible {
  outline: 2px solid var(--ms-text);
  outline-offset: 1px;
}

.ms-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--ms-surface);
  color: var(--ms-text);
}
.ms-skip:focus { left: 0; }

/* --- Suite bar ------------------------------------------------------------
   The dark strip across the top of every M365 property. Ours names the
   tenant and links out; it is not a Microsoft product and does not pretend
   to be one. */

.ms-suite {
  display: flex;
  align-items: center;
  gap: .25rem;
  height: 48px;
  padding-inline: 4px 12px;
  background: var(--ms-suite);
  color: #FFFFFF;
  /* A fixed-height bar must not be allowed to wrap. */
  white-space: nowrap;
  overflow: hidden;
}

.ms-suite__waffle {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #FFFFFF;
  flex-shrink: 0;
}
.ms-suite__waffle:hover { background: rgba(255,255,255,.1); }

.ms-suite__brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding-inline: 8px;
  height: 48px;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.ms-suite__brand:hover { text-decoration: none; background: rgba(255,255,255,.1); }
.ms-suite__brand img { height: 20px; width: 20px; }

.ms-suite__sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.35);
  margin-inline: .35rem;
}
.ms-suite__app { font-size: 15px; color: rgba(255,255,255,.9); }

.ms-suite__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.ms-suite__link {
  color: #FFFFFF;
  font-size: 13px;
  padding: .45rem .7rem;
  border-radius: var(--ms-radius);
}
.ms-suite__link:hover { background: rgba(255,255,255,.12); text-decoration: none; }

/* On a phone the bar keeps the waffle and the tenant name and drops the
   rest. The app label is already the page title below, and the waffle is
   the same link as the one on the right. */
@media (max-width: 700px) {
  .ms-suite__sep,
  .ms-suite__app,
  .ms-suite__right { display: none; }
}

/* --- Page shell ---------------------------------------------------------- */

.ms-page {
  max-width: 1360px;
  margin-inline: auto;
  padding: 0 clamp(12px, 3vw, 32px) 64px;
}

.ms-head {
  padding: 28px 0 20px;
  border-bottom: 1px solid var(--ms-line);
  margin-bottom: 24px;
}
.ms-crumb { font-size: 12px; color: var(--ms-text-2); margin-bottom: 10px; }
.ms-crumb a { color: var(--ms-text-2); }
.ms-head h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.ms-head p { color: var(--ms-text-2); margin-top: 8px; max-width: 78ch; }

.ms-layout { display: grid; gap: 28px; align-items: start; }
@media (min-width: 900px) {
  .ms-layout { grid-template-columns: 228px 1fr; }
}

/* --- Left rail, SharePoint style ----------------------------------------- */

.ms-rail { display: grid; gap: 20px; }
@media (min-width: 900px) {
  .ms-rail { position: sticky; top: 20px; }
}

.ms-rail__title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ms-text-2);
  padding: 0 8px 6px;
}

.ms-rail__list { list-style: none; display: grid; }
.ms-rail__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  color: var(--ms-text);
  font-size: 14px;
  border-left: 2px solid transparent;
}
.ms-rail__list a:hover {
  background: var(--ms-surface);
  text-decoration: none;
  border-left-color: var(--ms-line-strong);
}
.ms-rail__list a[aria-current="true"] {
  background: var(--ms-surface);
  font-weight: 600;
  border-left-color: var(--ms-blue);
}
.ms-rail__list svg { color: var(--ms-text-2); flex-shrink: 0; }

.ms-note {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-left: 4px solid var(--ms-blue);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ms-text-2);
}
.ms-note strong { color: var(--ms-text); display: block; margin-bottom: 3px; }

/* --- Section headings ---------------------------------------------------- */

.ms-section + .ms-section { margin-top: 36px; }
.ms-section > h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}
.ms-section > .ms-sub {
  color: var(--ms-text-2);
  margin-bottom: 14px;
  font-size: 13px;
}

/* --- Destination cards --------------------------------------------------- */

.ms-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.ms-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-4);
  color: var(--ms-text);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.ms-card:hover {
  text-decoration: none;
  box-shadow: var(--ms-shadow-8);
  border-color: var(--ms-line-strong);
}
.ms-card:hover .ms-card__title { color: var(--ms-blue); text-decoration: underline; }

.ms-card__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--ms-blue-tint);
  color: var(--ms-blue-press);
  border-radius: var(--ms-radius);
}
/* These are spans inside a span, so each has to be told to stack. Left
   inline they run together into one wrapped sentence. */
.ms-card__title { display: block; font-weight: 600; font-size: 14px; }
.ms-card__desc { display: block; color: var(--ms-text-2); font-size: 13px; margin-top: 3px; }
.ms-card__host {
  display: block;
  color: var(--ms-text-2);
  font-size: 12px;
  margin-top: 7px;
  /* Long hostnames must not widen the grid track. */
  overflow-wrap: anywhere;
}

/* --- Accordion ----------------------------------------------------------- */

.ms-acc {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-4);
}
.ms-acc__item + .ms-acc__item { border-top: 1px solid var(--ms-line); }

.ms-acc__item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  list-style: none;
}
.ms-acc__item summary::-webkit-details-marker { display: none; }
.ms-acc__item summary::marker { content: ""; }
.ms-acc__item summary:hover { background: #F3F2F1; }

/* Fluent uses a chevron that points right when closed, down when open. */
.ms-acc__chev {
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ms-text-2);
  border-bottom: 1.5px solid var(--ms-text-2);
  transform: rotate(-45deg);
  transition: transform .15s ease;
  flex-shrink: 0;
  margin-left: 2px;
}
.ms-acc__item[open] .ms-acc__chev { transform: rotate(45deg); }

.ms-acc__body {
  padding: 0 16px 16px 36px;
  color: var(--ms-text-2);
  max-width: 84ch;
}
.ms-acc__body p + p,
.ms-acc__body p + ol,
.ms-acc__body p + ul,
.ms-acc__body ol + p,
.ms-acc__body ul + p { margin-top: 10px; }
.ms-acc__body ol { padding-left: 18px; display: grid; gap: 6px; }
.ms-acc__body ul { padding-left: 18px; display: grid; gap: 6px; }
.ms-acc__body strong { color: var(--ms-text); }

.ms-warn {
  margin-top: 12px;
  padding: 10px 12px;
  background: #FDE7E9;
  border-left: 4px solid var(--ms-red);
  color: #6E1B20;
}
.ms-warn strong { color: inherit; }

/* --- Form ---------------------------------------------------------------- */

.ms-form {
  background: var(--ms-surface);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-radius);
  box-shadow: var(--ms-shadow-4);
  padding: 20px;
  display: grid;
  gap: 16px;
  max-width: 720px;
}
.ms-row { display: grid; gap: 16px; }
@media (min-width: 620px) {
  .ms-row { grid-template-columns: 1fr 1fr; }
}

.ms-field { display: grid; gap: 5px; }
.ms-field label { font-weight: 600; font-size: 13px; }
.ms-field .req { color: var(--ms-red); }

/* Fluent inputs: a hairline box that grows a blue underline on focus. */
.ms-field input,
.ms-field select,
.ms-field textarea {
  width: 100%;
  padding: 7px 10px;
  background: var(--ms-surface);
  border: 1px solid var(--ms-line-strong);
  border-radius: var(--ms-radius);
  font-size: 14px;
}
.ms-field textarea { min-height: 120px; resize: vertical; }
.ms-field input:hover,
.ms-field select:hover,
.ms-field textarea:hover { border-color: var(--ms-text-2); }
.ms-field input:focus,
.ms-field select:focus,
.ms-field textarea:focus {
  outline: none;
  border-color: var(--ms-blue);
  box-shadow: inset 0 -2px 0 0 var(--ms-blue);
}
.ms-field input::placeholder,
.ms-field textarea::placeholder { color: #A19F9D; }

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 7px 20px;
  background: var(--ms-blue);
  color: #FFFFFF;
  border: 1px solid var(--ms-blue);
  border-radius: var(--ms-radius);
  font-size: 14px;
  font-weight: 600;
}
.ms-btn:hover { background: var(--ms-blue-hover); border-color: var(--ms-blue-hover); text-decoration: none; }
.ms-btn:active { background: var(--ms-blue-press); }
.ms-btn:disabled { opacity: .5; cursor: default; }

.ms-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.ms-foot p { font-size: 12px; color: var(--ms-text-2); }

/* Honeypot. */
.ms-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ms-status {
  padding: 10px 12px;
  border: 1px solid var(--ms-line-strong);
  background: #F3F2F1;
  font-size: 13px;
}

/* --- Page footer --------------------------------------------------------- */

.ms-pagefoot {
  border-top: 1px solid var(--ms-line);
  margin-top: 44px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ms-text-2);
}

@media print {
  .ms-suite, .ms-rail, .ms-form { display: none; }
  .ms-acc__item { break-inside: avoid; }
  .ms-acc__body { display: block !important; }
}