/*

 * The help centre's stylesheet.

 *

 * The palette is the product's own, taken from the back office rather than

 * invented: #BEC2AE is what fills a primary button there, #686D52 is the same

 * hue carried down until it reads as text, and the neutrals are the app's.

 * Somebody reading this with the product open in the next tab should not feel

 * they have changed companies.

 *

 * The split between `--accent` and `--accent-ink` is load-bearing and is the

 * same one the app makes: #BEC2AE is a pale colour, so it fills well and reads

 * terribly — white on it measures 1.8:1 and it measures 1.8:1 on white. Every

 * piece of type that carries the brand colour uses the ink; every filled area

 * uses the accent with near-black on top.

 */



:root {

  --accent: #bec2ae;

  --accent-ink: #686d52;

  --accent-soft: #e8ebe0;

  --accent-text: #16191d;



  --bg: #f7f8f5;

  --surface: #ffffff;

  --surface-2: #eceef1;

  --border: #d9dcd2;

  --border-strong: #c3c8b8;

  --text: #16191d;

  --text-muted: #5c636d;



  --danger: #b3261e;

  --warning-ink: #8c5b00;

  --warning-soft: #fdf4e3;

  --success-ink: #0e743a;

  --success-soft: #e8f4ec;



  --radius: 12px;

  --measure: 68ch;



  --font: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI',

    'Noto Sans Arabic', sans-serif;

}



* { box-sizing: border-box; }



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



body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font-family: var(--font);

  font-size: 17px;

  line-height: 1.65;

  /* Arabic sits lower and needs a touch more room between lines. */

  text-rendering: optimizeLegibility;

}



html[dir='rtl'] body { line-height: 1.85; }



img { max-width: 100%; height: auto; }



a { color: var(--accent-ink); }



.visually-hidden {

  position: absolute;

  width: 1px; height: 1px;

  margin: -1px; padding: 0;

  overflow: hidden; clip: rect(0 0 0 0);

  white-space: nowrap; border: 0;

}



/* ---- The bar across the top ---------------------------------------------- */



.top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 14px 20px;

  background: var(--surface);

  border-bottom: 1px solid var(--border);

  position: sticky;

  top: 0;

  z-index: 10;

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  color: var(--text);

  font-weight: 600;

}



/* The mark: a filled square in the house colour. Deliberately not a glyph or

   an emoji — it is the one place the accent gets to be itself. */

/*

 * The wordmark, where a coloured square used to stand in for one.

 *

 * Sized by height with the width left to follow, because the artwork is one

 * shape at roughly 2:1 — fixing both would squash it. `alt=""` and

 * aria-hidden because the name is spelled out in the text beside it; read

 * aloud, a picture of the name after the name is the name twice.

 */

.brand-mark {

  height: 22px;

  width: auto;

  flex: 0 0 auto;

}



.brand-name { font-size: 16px; letter-spacing: -0.01em; }



.lang {

  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 7px 12px;

  border: 1px solid var(--border-strong);

  border-radius: 999px;

  background: var(--surface);

  color: var(--accent-ink);

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  min-height: 40px;

}



.lang:hover { background: var(--accent-soft); }

.lang:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }



/* ---- Page frame ---------------------------------------------------------- */



.wrap {

  max-width: 900px;

  margin: 0 auto;

  padding: 40px 20px 72px;

}



.hero { margin-bottom: 28px; }



h1 {

  margin: 0 0 10px;

  font-size: clamp(30px, 5vw, 42px);

  line-height: 1.18;

  letter-spacing: -0.02em;

  text-wrap: balance;

}



.lede {

  margin: 0;

  max-width: var(--measure);

  color: var(--text-muted);

  font-size: 18px;

}



/* ---- Search -------------------------------------------------------------- */



.search {

  position: relative;

  margin: 24px 0 8px;

}



.search-icon {

  position: absolute;

  inset-inline-start: 16px;

  top: 17px;

  color: var(--text-muted);

  pointer-events: none;

}



.search input {

  width: 100%;

  min-height: 56px;

  padding: 0 18px;

  padding-inline-start: 48px;

  font: inherit;

  font-size: 17px;

  color: var(--text);

  background: var(--surface);

  border: 1px solid var(--border-strong);

  border-radius: var(--radius);

}



.search input::placeholder { color: var(--text-muted); }



.search input:focus {

  outline: none;

  border-color: var(--accent-ink);

  box-shadow: 0 0 0 3px var(--accent-soft);

}



.search-hint {

  margin: 8px 2px 0;

  font-size: 14px;

  color: var(--text-muted);

}



.results { margin: 20px 0 8px; }



.result {

  display: block;

  padding: 14px 16px;

  margin-bottom: 8px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  text-decoration: none;

  color: var(--text);

}



.result:hover { border-color: var(--accent-ink); }



.result-title { font-weight: 600; }



.result-where {

  display: block;

  font-size: 14px;

  color: var(--text-muted);

}



.result-hit {

  display: block;

  margin-top: 4px;

  font-size: 15px;

  color: var(--text-muted);

}



.result-hit mark {

  background: var(--accent-soft);

  color: var(--text);

  padding: 0 2px;

  border-radius: 3px;

}



.results-empty {

  padding: 16px;

  color: var(--text-muted);

}



/* ---- The introduction ---------------------------------------------------- */



/*

 * Sits above the numbered sections rather than among them, because it is the

 * one block on this page that is not a step. A reader who already knows what

 * Harakah is scrolls past it once; a reader who does not needs it before the

 * word "business unit" turns up in a card summary.

 *

 * No border and no shadow: a panel here would read as a fourth kind of card

 * and flatten the hierarchy the numbered cards depend on.

 */

.intro {

  margin: 0 0 30px;

  padding: 22px 24px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

}



.intro-title {

  margin: 0 0 8px;

  font-size: 22px;

  line-height: 1.25;

}



.intro-lede {

  margin: 0 0 18px;

  max-width: var(--measure);

  color: var(--text-muted);

  font-size: 16px;

}



/* Two columns where there is room. The points are independent claims, not a

   sequence, so they are a list and carry no numbers. */

.intro-points {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 14px 28px;

  margin: 0;

  padding: 0;

  list-style: none;

}



.intro-points li {

  display: grid;

  /* Items in a row stretch to the tallest, so without this the shorter ones

     space their two lines out to fill the height instead of sitting at the

     top, and the headings stop lining up across the row. */

  align-content: start;

  gap: 2px;

  padding-inline-start: 14px;

  border-inline-start: 3px solid var(--accent);

}



.intro-points strong {

  font-size: 15px;

  font-weight: 700;

}



.intro-points span {

  font-size: 14.5px;

  line-height: 1.55;

  color: var(--text-muted);

}



@media (max-width: 560px) {

  .intro { padding: 18px 16px; }

  .intro-title { font-size: 20px; }

}



/*

 * The one deadline on the front page.

 *

 * Warning colours rather than the accent, and a rule down the leading edge,

 * because it is not a nicety of ordering like the note below it — it is the

 * only step in the guide that cannot be put right afterwards. Sits above the

 * section cards so somebody who came to set up a till reads it first.

 */

.first-thing {

  margin: 0 0 22px;

  padding: 18px 22px;

  max-width: var(--measure);

  background: var(--warning-soft);

  border: 1px solid var(--warning-ink);

  border-inline-start-width: 4px;

  border-radius: var(--radius);

}



.first-thing-title {

  margin: 0 0 8px;

  font-size: 18px;

  color: var(--warning-ink);

}



.first-thing p {

  margin: 0;

  font-size: 15.5px;

  line-height: 1.6;

}



.first-thing-link {

  display: inline-block;

  margin-top: 12px;

  font-weight: 600;

  color: var(--warning-ink);

}



/* ---- The section cards --------------------------------------------------- */



.order-note {

  margin: 8px 0 28px;

  padding: 12px 16px;

  background: var(--accent-soft);

  border-radius: var(--radius);

  color: var(--accent-text);

  font-size: 15px;

  max-width: var(--measure);

}



.part { margin-bottom: 36px; }



.part-name {

  margin: 0 0 14px;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.cards {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));

  gap: 12px;

}



.card {

  display: flex;

  gap: 14px;

  padding: 16px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  text-decoration: none;

  color: var(--text);

}



.card:hover {

  border-color: var(--accent-ink);

  background: #fdfdfb;

}



.card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }



/* The number is the sequence, which is real information in a setup guide —

   it is not decoration, and it is why these are numbered at all. */

.card-n {

  flex: 0 0 auto;

  width: 34px;

  height: 34px;

  display: grid;

  place-items: center;

  border-radius: 9px;

  background: var(--accent);

  color: var(--accent-text);

  font-size: 14px;

  font-weight: 700;

  font-variant-numeric: tabular-nums;

}



.card-body { display: block; }

.card-title { display: block; font-weight: 600; margin-bottom: 3px; }

.card-sum { display: block; font-size: 15px; color: var(--text-muted); line-height: 1.5; }



/* ---- An article ---------------------------------------------------------- */



.crumbs { margin-bottom: 20px; font-size: 15px; }

.crumbs a { color: var(--text-muted); text-decoration: none; }

.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }



.article-head { margin-bottom: 28px; }



.eyebrow {

  margin: 0 0 8px;

  font-size: 14px;

  font-weight: 600;

  color: var(--accent-ink);

}



.applies {

  margin: 14px 0 0;

  padding: 10px 14px;

  background: var(--surface-2);

  border-radius: 9px;

  font-size: 15px;

  max-width: var(--measure);

}



.toc {

  margin: 0 0 32px;

  padding: 16px 20px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

}



.toc-head {

  margin: 0 0 8px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.toc ol { margin: 0; padding-inline-start: 20px; }



/* The counter too, for the same reason the step number is converted: an

   Arabic page numbered 1. 2. 3. above a body written ١ ٢ ٣ reads as two

   documents. Ordered lists inside an article get the same treatment. */

[dir='rtl'] .toc ol,

[dir='rtl'] .prose ol { list-style-type: arabic-indic; }

.toc li { margin: 3px 0; }

.toc a { color: var(--text); text-decoration: none; }

.toc a:hover { color: var(--accent-ink); text-decoration: underline; }



/* ---- The writing itself -------------------------------------------------- */



.prose { max-width: var(--measure); }



.prose h2 {

  position: relative;

  margin: 44px 0 12px;

  padding-top: 20px;

  border-top: 1px solid var(--border);

  font-size: 25px;

  line-height: 1.25;

  letter-spacing: -0.015em;

  text-wrap: balance;

}



.prose h3 {

  margin: 30px 0 8px;

  font-size: 19px;

  line-height: 1.35;

}



.prose h4 {

  margin: 24px 0 6px;

  font-size: 16px;

  color: var(--text-muted);

}



.prose p { margin: 0 0 16px; }



.prose ul, .prose ol { margin: 0 0 16px; padding-inline-start: 26px; }

.prose li { margin: 6px 0; }

.prose li > ul, .prose li > ol { margin: 6px 0; }



.prose strong { font-weight: 600; }



.prose code {

  padding: 2px 6px;

  background: var(--surface-2);

  border-radius: 5px;

  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  font-size: 0.88em;

}



.prose pre {

  margin: 0 0 16px;

  padding: 14px 16px;

  overflow-x: auto;

  background: var(--surface-2);

  border-radius: var(--radius);

}



.prose pre code { padding: 0; background: none; }



/* The anchor beside a heading: there on hover and on keyboard focus, invisible

   otherwise, so it never competes with the heading it belongs to. */

.anchor {

  position: absolute;

  inset-inline-start: -22px;

  opacity: 0;

  text-decoration: none;

  color: var(--border-strong);

}



.prose h2:hover .anchor, .anchor:focus { opacity: 1; }



/*

 * A blockquote is how the content says "read this twice".

 *

 * Three kinds, told apart by their first word so the Markdown stays readable:

 * a plain note, something that will cost money or data if ignored, and a

 * thing that cannot be undone.

 */

.prose blockquote {

  margin: 0 0 18px;

  padding: 14px 18px;

  border-inline-start: 3px solid var(--accent);

  background: var(--surface);

  border-radius: 0 var(--radius) var(--radius) 0;

}



html[dir='rtl'] .prose blockquote { border-radius: var(--radius) 0 0 var(--radius); }



.prose blockquote > :last-child { margin-bottom: 0; }



.prose blockquote.warn {

  border-inline-start-color: #d9a441;

  background: var(--warning-soft);

}



.prose blockquote.stop {

  border-inline-start-color: var(--danger);

  background: #fdf1f0;

}



.prose blockquote.good {

  border-inline-start-color: var(--success-ink);

  background: var(--success-soft);

}



/* ---- Tables -------------------------------------------------------------- */



.table-scroll {

  margin: 0 0 18px;

  overflow-x: auto;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: var(--surface);

}



.prose table {

  width: 100%;

  border-collapse: collapse;

  font-size: 15.5px;

}



.prose th, .prose td {

  padding: 10px 14px;

  text-align: start;

  border-bottom: 1px solid var(--border);

  vertical-align: top;

}



.prose thead th {

  background: var(--accent);

  color: var(--accent-text);

  font-weight: 600;

  white-space: nowrap;

}



.prose tbody tr:last-child td { border-bottom: 0; }



/* ---- Screenshots --------------------------------------------------------- */



.prose img {

  display: block;

  margin: 6px 0 6px;

  border: 1px solid var(--border);

  border-radius: var(--radius);

  background: var(--surface);

}



/* A figure caption: Markdown emphasis on its own line under an image. */

.prose p > img + em {

  display: block;

  margin-top: 8px;

  font-size: 14.5px;

  font-style: normal;

  color: var(--text-muted);

}



/* ---- Previous / next ----------------------------------------------------- */



.pager {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  margin-top: 52px;

  padding-top: 24px;

  border-top: 1px solid var(--border);

}



.pager-link {

  flex: 0 1 auto;

  max-width: 46%;

  padding: 12px 16px;

  background: var(--surface);

  border: 1px solid var(--border);

  border-radius: var(--radius);

  text-decoration: none;

  color: var(--text);

}



.pager-link:hover { border-color: var(--accent-ink); }

.pager-next { text-align: end; }



.pager-rel {

  display: block;

  font-size: 13px;

  color: var(--text-muted);

}



.pager-title { display: block; font-weight: 600; font-size: 15.5px; }



/* ---- Foot ---------------------------------------------------------------- */



.foot {

  margin-top: 24px;

  padding: 34px 20px 44px;

  border-top: 1px solid var(--border);

  background: var(--surface);

  color: var(--text-muted);

  font-size: 14px;

}



/*

 * The about column is given twice the room of the two link columns: it holds

 * a sentence, and a sentence set to the same width as a three-item list wraps

 * into a ragged stack.

 */

.foot-grid {

  max-width: 1080px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  gap: 28px 40px;

}



.foot-col p { margin: 0; }



.foot-brand {

  font-weight: 700;

  font-size: 15px;

  color: var(--text);

}



.foot-note {

  margin-top: 6px !important;

  max-width: 46ch;

  line-height: 1.6;

}



.foot-head {

  margin: 0 0 10px;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--text-muted);

}



.foot-col ul {

  margin: 0;

  padding: 0;

  list-style: none;

  display: grid;

  gap: 7px;

}



.foot-col a { text-decoration: none; }

.foot-col a:hover { text-decoration: underline; }



.foot-hours {

  margin-top: 12px !important;

  font-size: 13px;

  line-height: 1.5;

}



.socials {

  display: flex;

  gap: 8px;

  margin-top: 14px;

}



/* A square touch target at 36px, which is the smallest that is comfortable on

   a phone — these are the only icon-only controls on the site apart from the

   language switch, and they are sized to match it. */

.soc {

  width: 36px;

  height: 36px;

  display: grid;

  place-items: center;

  border: 1px solid var(--border);

  border-radius: 9px;

  color: var(--accent-ink);

}



.soc:hover { background: var(--accent-soft); border-color: var(--border-strong); }

.soc:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }



@media (max-width: 760px) {

  .foot-grid { grid-template-columns: 1fr 1fr; }

  .foot-about { grid-column: 1 / -1; }

}



@media (max-width: 420px) {

  .foot-grid { grid-template-columns: 1fr; }

}



/* ---- Narrow screens ------------------------------------------------------ */



@media (max-width: 640px) {

  body { font-size: 16px; }

  .wrap { padding: 28px 16px 56px; }

  .cards { grid-template-columns: 1fr; }

  .search input { min-height: 52px; }

  .prose h2 { margin-top: 36px; font-size: 22px; }

  .anchor { display: none; }

  .pager { flex-direction: column; }

  .pager-link { max-width: none; }

  .pager-next { text-align: start; }

  .brand-name { font-size: 15px; }

  .lang span { display: none; }

  .lang { padding: 7px; }

}



@media (prefers-reduced-motion: reduce) {

  * { animation: none !important; transition: none !important; }

}



/* ---- Screenshots and the slots waiting for them --------------------------- */



.shot { margin: 22px 0; }



.shot img {

  display: block;

  margin: 0;

  width: 100%;

  border: 1px solid var(--border);

  border-radius: var(--radius);

}



.shot figcaption {

  margin-top: 8px;

  font-size: 14.5px;

  color: var(--text-muted);

}



/*

 * A picture that has not been taken yet.

 *

 * Deliberately plain and deliberately obvious: this is scaffolding, and

 * scaffolding that looks like finished work is how a placeholder ships. The

 * alt text is shown because it is the brief for whoever takes the shot.

 */

.shot-slot {

  display: flex;

  gap: 12px;

  align-items: flex-start;

  padding: 18px 20px;

  border: 1px dashed var(--border-strong);

  border-radius: var(--radius);

  background: repeating-linear-gradient(

    -45deg,

    var(--surface),

    var(--surface) 10px,

    #f3f4ef 10px,

    #f3f4ef 20px

  );

}



.shot-tag {

  flex: 0 0 auto;

  padding: 3px 9px;

  border-radius: 999px;

  background: var(--accent);

  color: var(--accent-text);

  font-size: 12px;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

}



.shot-brief {

  font-size: 15px;

  color: var(--text-muted);

  line-height: 1.5;

}



/*

 * An Arabic page showing the English capture of the same screen.

 *

 * Quiet, because the picture is still the right picture and the note is a

 * footnote to it — but attached to the image rather than folded into the

 * caption, so it reads as a fact about the photograph and not as something

 * the section is telling you about the software.

 */

.shot-note {

  margin: 6px 0 0;

  padding-inline-start: 10px;

  border-inline-start: 2px solid var(--border-strong);

  font-size: 13.5px;

  color: var(--text-muted);

}



/*

 * The line at the very bottom.

 *

 * Below the three columns and separated by a rule, because it belongs to the

 * whole site rather than to whichever column it would otherwise sit in — and

 * quieter than everything above it, since nobody comes here to read it.

 */

.foot-legal {

  margin-top: 28px;

  padding-top: 16px;

  border-top: 1px solid var(--line, rgba(0, 0, 0, 0.1));

  text-align: center;

}



.foot-legal p {

  margin: 0;

  font-size: 13px;

  opacity: 0.7;

}