/* ==========================================================================
   THE INSTRUMENT MANUAL. guide.css v1.22.54
   --------------------------------------------------------------------------
   ONE SHEET, NO INLINE STYLE, NO SCRIPT. The application CSP sends
   style-src 'self' and script-src 'self', so every rule a page needs lives in
   a file it links. That is not a constraint worked around here: a document
   whose layout is two parallel columns needs a grid and nothing else.

   THE BILINGUAL COLUMNS ARE THE COMPONENT. .gd-clause is a three-track grid -
   English, spine, Indonesian - and the spine is the middle track rather than a
   border on either column, because the number belongs to the pair and not to
   one language. Under 900px the grid collapses to one column and the spine
   becomes a chip above the pair, so the numbering survives.

   WHY page-masthead.css IS NOT REUSED. That sheet is injected by AppShell into
   authenticated surfaces and is written against the dark slab it owns there.
   This page is public and has no AppShell, so importing its assumptions would
   couple a visitor-facing document to the workspace shell. The slab here is
   its own rule, deliberately in the same brand colours.
   ========================================================================== */

.gd {
  margin: 0;
  overflow-x: hidden;
  background: var(--ds-bg, #f5f6f1);
  color: var(--ds-text, #162319);
  font: 400 var(--ds-font-size-md, 1rem)/var(--ds-leading-normal, 1.6) var(--ds-font-sans, system-ui);
}

/* ------------------------------------------------------------------ header */
.gd-header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-5, 20px);
  width: min(100% - 40px, 1180px);
  min-height: 78px;
  margin: 0 auto;
  border-bottom: 1px solid var(--ds-border, #d4dccb);
}
.gd-header .brand { display: inline-flex; align-items: center; text-decoration: none; }
.gd-header .brand img { display: block; height: auto; max-width: 190px; }
.gd-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-4, 16px);
  margin-inline-start: auto;
}
.gd-nav a {
  color: var(--ds-pine, #0e5631);
  font-size: var(--ds-font-size-sm, .875rem);
  font-weight: 650;
  text-decoration: none;
}
.gd-nav a:hover { text-decoration: underline; }
.gd-nav a[aria-current="page"] { color: var(--ds-text, #162319); text-decoration: underline; }
/* The current document is stated, not linked: a link to the page you are on is a dead control. */
.gd-nav__here {
  padding-inline-start: var(--ds-space-4, 16px);
  border-inline-start: 1px solid var(--ds-border, #d4dccb);
  color: var(--ds-text-muted, #536054);
  font-size: var(--ds-font-size-sm, .875rem);
}

.gd-main { width: min(100% - 40px, 1180px); margin: 0 auto; padding-block: var(--ds-space-8, 32px) var(--ds-space-9, 40px); }

/* ------------------------------------------------------------------ shared type */
.gd-eyebrow {
  margin: 0;
  color: var(--ds-pine, #0e5631);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gd-lede {
  max-width: 74ch;
  margin: var(--ds-space-4, 16px) 0 0;
  color: var(--ds-text, #162319);
  font-size: var(--ds-font-size-lg, 1.0625rem);
  line-height: 1.62;
  text-wrap: pretty;
}
/* The Indonesian register is marked by ink, never by a smaller size: a second language set
   smaller than the first is a statement about which reader matters. Only the italic differs. */
.gd-lede--id { color: var(--ds-text-muted, #536054); font-style: italic; }

/* ------------------------------------------------------------------ index */
.gd-hero { padding-block: var(--ds-space-6, 24px) var(--ds-space-8, 32px); border-bottom: 1px solid var(--ds-border, #d4dccb); }
.gd-hero__title {
  max-width: 30ch;
  margin: var(--ds-space-3, 12px) 0 0;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.gd-group { padding-block: var(--ds-space-7, 28px); border-bottom: 1px solid var(--ds-border, #d4dccb); }
.gd-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-3, 12px);
  margin: 0 0 var(--ds-space-5, 20px);
  font-size: var(--ds-font-size-xl, 1.375rem);
  font-weight: 700;
}
.gd-group__head span { color: var(--ds-text-muted, #536054); font-size: var(--ds-font-size-md, 1rem); font-style: italic; font-weight: 400; }

.gd-index {
  display: grid;
  gap: var(--ds-space-4, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}
.gd-index > li {
  border: 1px solid var(--ds-border, #d4dccb);
  border-radius: var(--ds-radius-md, 10px);
  background: var(--ds-surface, #fbfcf7);
}
.gd-index a {
  display: flex;
  gap: var(--ds-space-4, 16px);
  min-height: 100%;
  padding: var(--ds-space-5, 20px);
  color: inherit;
  text-decoration: none;
}
.gd-index a { border-radius: var(--ds-radius-md, 10px); }
.gd-index a:hover { background: var(--ds-surface-sunken, #eef1e7); }
.gd-index__n {
  flex: 0 0 auto;
  color: var(--ds-pine, #0e5631);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-md, 1rem);
  font-weight: 700;
}
.gd-index__body { display: grid; gap: 3px; min-width: 0; overflow-wrap: break-word; }
.gd-index__body strong { font-size: var(--ds-font-size-lg, 1.0625rem); font-weight: 650; }
.gd-index__body em { color: var(--ds-text-muted, #536054); font-size: var(--ds-font-size-sm, .875rem); }
.gd-index__body small { margin-top: 5px; color: var(--ds-pine, #0e5631); font-size: var(--ds-font-size-xs, .75rem); font-weight: 600; }
.gd-index a:hover .gd-index__body strong { text-decoration: underline; }

.gd-note { max-width: 78ch; padding-block: var(--ds-space-7, 28px); }
.gd-note h2 { margin: 0 0 var(--ds-space-3, 12px); font-size: var(--ds-font-size-xl, 1.375rem); font-weight: 700; }
.gd-note p { margin: 0 0 var(--ds-space-3, 12px); line-height: 1.62; text-wrap: pretty; }
.gd-note__id { color: var(--ds-text-muted, #536054); font-style: italic; }

/* ------------------------------------------------------------------ one document */
.gd-crumb { padding-block: 0 var(--ds-space-4, 16px); }

/* v1.22.62. THE SLAB MOVED TO public-masthead.css, shared with /tools/ and the legal documents. The band,
   the eyebrow, the title and the lead are all .pm-head's now, under the platform's own .ds-page-head names,
   so this sheet keeps only the two parts a manual document adds to a masthead. What went: .gd-slab and its
   four children, including the light-ink correction on the title that v1.22.54 had to add after a browser
   showed it rendering dark on dark - .pm-head makes that correction once, for every public surface. */
.gd-head__id {
  margin: var(--ds-space-2, 8px) 0 0;
  color: var(--ds-lime, #cbe888);
  font-size: var(--ds-font-size-lg, 1.0625rem);
  font-style: italic;
}
.gd-head__where { margin: var(--ds-space-5, 20px) 0 0; color: oklch(88% .03 122); font-size: var(--ds-font-size-sm, .875rem); }

.gd-avail {
  margin-block-start: var(--ds-space-6, 24px);
  padding: var(--ds-space-5, 20px) var(--ds-space-6, 24px) var(--ds-space-6, 24px);
  border: 1px solid var(--ds-border, #d4dccb);
  border-inline-start: 3px solid var(--ds-pine, #0e5631);
  border-radius: var(--ds-radius-md, 10px);
  background: var(--ds-surface, #fbfcf7);
}
.gd-avail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-space-3, 12px);
  margin: 0 0 var(--ds-space-3, 12px);
  color: var(--ds-pine, #0e5631);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.gd-avail__head span { color: var(--ds-text-muted, #536054); font-weight: 400; }
.gd-avail__line { margin: 0; font-size: var(--ds-font-size-lg, 1.0625rem); font-weight: 650; }
.gd-avail__line--id { margin-top: 2px; color: var(--ds-text-muted, #536054); font-size: var(--ds-font-size-md, 1rem); font-style: italic; font-weight: 400; }
.gd-avail__open { max-width: 80ch; margin: var(--ds-space-4, 16px) 0 0; color: var(--ds-text, #162319); font-size: var(--ds-font-size-sm, .875rem); line-height: 1.58; }
.gd-avail__open--id { margin-top: 4px; color: var(--ds-text-muted, #536054); font-style: italic; }

/* ---------------------------------------------------------- the bilingual clause */
.gd-clause {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  align-items: start;
  padding-block: var(--ds-space-7, 28px);
  border-bottom: 1px solid var(--ds-border, #d4dccb);
}
.gd-clause__col { min-width: 0; overflow-wrap: break-word; }
.gd-tag {
  margin: 0;
  color: var(--ds-pine, #0e5631);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  font-weight: 500;
  letter-spacing: .2em;
}
.gd-tag--id { color: #7a5620; }
.gd-clause__head {
  margin: var(--ds-space-2, 8px) 0 var(--ds-space-3, 12px);
  font-size: var(--ds-font-size-xl, 1.375rem);
  font-weight: 650;
  line-height: 1.16;
  text-wrap: balance;
}
.gd-prose { max-width: 62ch; margin: 0; font-size: var(--ds-font-size-md, 1rem); line-height: 1.66; text-wrap: pretty; }
.gd-steps { max-width: 62ch; margin: 0; padding-inline-start: 1.35em; }
.gd-steps li { margin-block-end: var(--ds-space-3, 12px); line-height: 1.62; text-wrap: pretty; }
.gd-steps li::marker { color: var(--ds-pine, #0e5631); font-family: var(--ds-font-mono, ui-monospace, monospace); font-weight: 700; }

/* THE SPINE. The middle track: a hairline the full height of the pair, with the clause
   number sitting on the paper over it. It is what makes two columns one document. */
.gd-spine {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: start center;
  margin: 0;
  color: var(--ds-pine, #0e5631);
  font-family: var(--ds-font-mono, ui-monospace, monospace);
  font-size: var(--ds-font-size-xs, .75rem);
  font-weight: 700;
  padding-block-start: 30px;
}
.gd-spine::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
  background: oklch(36% .085 155 / .4);
}
/* THE NUMBER IS REAL TEXT IN THE MARKUP, not generated content, and that is a decision rather
   than a habit: ::after content cannot be selected or copied, and a clause reference is exactly
   the string a reader quotes in an email or a ticket. It also has to sit above the hairline it
   crosses, which is what the paper background and the stacking context below are for. */
.gd-spine__n {
  position: relative;
  padding-block: 4px;
  background: var(--ds-bg, #f5f6f1);
}

.gd-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px) var(--ds-space-6, 24px);
  justify-content: space-between;
  padding-block: var(--ds-space-5, 20px);
}
.gd-foot p { margin: 0; color: var(--ds-text-muted, #536054); font-family: var(--ds-font-mono, ui-monospace, monospace); font-size: var(--ds-font-size-xs, .75rem); letter-spacing: .1em; text-transform: uppercase; }
/* The provenance line is a stamp and reads as one. These two are controls, so they keep sentence
   case and normal tracking: a link set in uppercase mono at 12px is a label pretending to be a link. */
.gd-foot__next { font-family: var(--ds-font-sans, system-ui); font-size: var(--ds-font-size-sm, .875rem); letter-spacing: normal; text-transform: none; }
.gd-foot a { color: var(--ds-pine, #0e5631); font-weight: 700; }

.gd-sitefoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2, 8px) var(--ds-space-6, 24px);
  justify-content: space-between;
  width: min(100% - 40px, 1180px);
  min-height: 72px;
  margin: 0 auto;
  border-top: 1px solid var(--ds-border, #d4dccb);
  color: var(--ds-text-muted, #536054);
  font-size: var(--ds-font-size-sm, .875rem);
  align-items: center;
}
.gd-sitefoot a { color: var(--ds-pine, #0e5631); font-weight: 650; }

/* ------------------------------------------------------------------ ONE COLUMN
   Two parallel columns need width. Below 900px they become a sequence, and the
   spine number moves above the pair as a chip so the reference is not lost. A
   rule between the two languages replaces the vertical hairline. */
@media (max-width: 899px) {
  .gd-clause { grid-template-columns: minmax(0, 1fr); gap: var(--ds-space-5, 20px); }
  .gd-spine {
    justify-self: start;
    place-items: center;
    padding: 5px 13px;
    border: 1px solid oklch(36% .085 155 / .4);
    border-radius: 999px;
    padding-block-start: 5px;
  }
  .gd-spine::before { content: none; }
  .gd-spine__n { padding-block: 0; background: none; }
  .gd-clause > .gd-clause__col:last-child { padding-block-start: var(--ds-space-5, 20px); border-block-start: 1px solid oklch(48% .06 80 / .35); }
  .gd-header { flex-wrap: wrap; min-height: 0; padding-block: var(--ds-space-4, 16px); }
  .gd-nav { margin-inline-start: 0; order: 3; width: 100%; }
  /* THE MANUAL'S NAVIGATION SURVIVES A PHONE, and it did not until this rule.
     responsive-system.css carries a global `header nav>a{display:none}` under 580px, written for
     the workspace header whose links are replaced by the injected shell at that width. This page
     has no injected shell, so that rule removed every way back to the index: on a phone the
     manual became a document you could enter and not leave.
     FIXED BY SPECIFICITY, NOT BY !important AND NOT BY EDITING THE GLOBAL RULE. `header nav>a` is
     (0,0,3); `.gd-header .gd-nav > a` is (0,2,1) and wins outright, so the outcome does not depend
     on which sheet AppShell happens to load last - and no other page loses the behaviour it wants.
     Measured in a browser at a true 390px viewport, before and after. */
  .gd-header .gd-nav > a { display: inline-flex; }
  .gd-header .brand { order: 1; }
  .gd-header .ds-btn { order: 2; margin-inline-start: auto; }
  .gd-nav__here { padding-inline-start: 0; border-inline-start: 0; }
}

/* ------------------------------------------------------------------ PAPER
   A manual is printed. The slab flattens to black on white, the spine survives
   as a rule, and the navigation and the sign-in control go: neither is a
   control on paper. */
@media print {
  .gd-header, .gd-sitefoot, .gd-crumb { display: none; }
  .gd-main { width: 100%; padding: 0; }
  .gd-head__id, .gd-head__where { color: #000; }
  .gd-avail { border-color: #000; background: none; }
  .gd-clause { break-inside: avoid; }
  .gd-index a { background: none; }
}