/* The user manual's own parts, on top of /cloud-console/project-info/console.css: the list of the manual's sections, a numbered
   step beside a labelled screenshot, the markers on the screenshot, and the boxes that say what you see when it worked.
   Colours come only from console.css's tokens, so light (the default) and dark both work. */

/* The manual's sections: a row of links that wraps (never scrolls sideways), the current one marked. */
.manual-nav { margin: 0 0 var(--space-6); }
.manual-nav ol { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; counter-reset: part; }
.manual-nav li { margin: 0; }
.manual-nav li + li { counter-increment: part; }
.manual-nav a {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: var(--text-sm);
}
.manual-nav a::before {
  content: counter(part); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  background: var(--idle-soft); color: var(--muted); font-size: var(--text-xs); font-weight: 600;
}
.manual-nav li:first-child a::before { content: "i"; }
.manual-nav a:hover { border-color: var(--accent); text-decoration: none; }
.manual-nav a[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.manual-nav a[aria-current="page"]::before { background: var(--accent); color: var(--accent-ink); }
@media (pointer: coarse) { .manual-nav a { min-height: 44px; } }

/* On this page: the walkthroughs of a section */
.on-page { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.on-page p { margin: 0 0 var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.on-page ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; padding-left: 1.2em; }
.on-page li { margin: 0; }

/* A walkthrough */
.task { margin: var(--space-10) 0 0; padding-top: var(--space-6); border-top: 1px solid var(--line); }
.task > h2 { margin-top: 0; font-size: var(--text-xl); }
.task h3 { font-size: var(--text-lg); margin: var(--space-6) 0 var(--space-2); }
.needs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.start { margin: var(--space-2) 0 var(--space-4); }

/* A screenshot beside its steps: side by side on a wide screen, the picture first on a narrow one. */
.walk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-4) var(--space-6); align-items: start; margin: var(--space-4) 0; }
.walk + .walk { margin-top: var(--space-6); }
@media (max-width: 1100px) { .walk { grid-template-columns: minmax(0, 1fr); } }

/* The labelled screenshot. The frame holds the markers; the crop inside it shows the part of the picture that matters
   (the image is placed in it by its own width and offset), so a marker's corner may sit just over the crop's edge. */
.marked { margin: 0; min-width: 0; }
.marked .frame { position: relative; }
.marked .crop {
  position: relative; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.marked .crop img { position: absolute; display: block; max-width: none; height: auto; }
.marked figcaption { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.pin {
  position: absolute; border: 2px solid var(--accent); border-radius: var(--radius); pointer-events: none;
  box-shadow: 0 0 0 1px var(--surface);
}
.pin b {
  position: absolute; right: -12px; top: -12px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--surface), var(--shadow-sm);
}
@media (max-width: 640px) {
  .pin { border-width: 1.5px; }
  .pin b { right: -10px; top: -10px; min-width: 22px; height: 22px; }
}

/* A picture with no markers (what you see afterwards), at its own size at most. */
.plain-shot { margin: var(--space-3) 0 var(--space-4); min-width: 0; }
.plain-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface); }
.plain-shot figcaption { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-2); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); align-items: start; }
.phone-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 280px)); gap: var(--space-5); align-items: start; }

/* The numbered steps: the same numbers as the markers. */
.steps { list-style: none; margin: 0; padding: 0; }
.steps > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); margin: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.steps > li:first-child { padding-top: 0; }
.steps > li:last-child { border-bottom: 0; }
.steps .n {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700;
}
.steps .what > :first-child { margin-top: 0; }
.steps .what > :last-child { margin-bottom: 0; }
.steps .what ul { margin: var(--space-1) 0; }
.steps .hint { margin-top: var(--space-1); }

/* A plain numbered list (a procedure with no picture) keeps the browser's numbers, so it is never read as markers. */
.procedure { margin: var(--space-2) 0 var(--space-4); padding-left: 1.6em; }
.procedure > li { padding-left: var(--space-1); }
.procedure > li + li { margin-top: var(--space-2); }

/* What you see when it worked; a caution; a refusal to expect. */
.result, .caution, .refusal {
  margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--radius); background: var(--surface);
}
.result { border-color: var(--ok); background: var(--ok-soft); }
.caution { border-color: var(--warn); background: var(--warn-soft); }
.refusal { border-color: var(--bad); background: var(--bad-soft); }
.result > .title, .caution > .title, .refusal > .title { margin: 0 0 var(--space-1); font-weight: 600; }
.result > .title { color: var(--ok); }
.caution > .title { color: var(--warn); }
.refusal > .title { color: var(--bad); }
.result > :last-child, .caution > :last-child, .refusal > :last-child { margin-bottom: 0; }
.result ul, .caution ul, .refusal ul { margin: var(--space-1) 0; }

/* A message as the console says it, word for word */
q { font-style: normal; }
q.msg { color: var(--ink); background: var(--idle-soft); border-radius: var(--radius-sm); padding: 0.05em 0.35em; overflow-wrap: anywhere; }
.table-frame td q.msg { display: inline; }

/* A standard procedure: a short checklist in a card */
.sops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin: var(--space-4) 0; }
.sop { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.sop h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.sop > p { margin: 0 0 var(--space-2); color: var(--muted); font-size: var(--text-sm); }
.sop ol { margin: 0; padding-left: 1.4em; }

/* How to read the steps: a sample marker */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.legend li { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.legend .sample {
  position: relative; display: inline-block; width: 64px; height: 26px; border: 2px solid var(--accent); border-radius: var(--radius);
  margin: 8px 12px 0 0; flex: none;
}
.legend .sample b {
  position: absolute; right: -12px; top: -12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); font-size: var(--text-xs); font-weight: 700; box-shadow: 0 0 0 2px var(--surface);
}

/* Previous and next section */
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin: var(--space-10) 0 0; }
.pager a {
  display: flex; flex-direction: column; gap: 2px; min-width: min(100%, 240px); padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink);
}
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager a span { color: var(--muted); font-size: var(--text-sm); }
.pager a b { color: var(--accent); }
.pager .next { margin-left: auto; text-align: right; }

/* Tables of the manual: the message column wraps at any point, so a long message never widens the page. */
.messages td:first-child { min-width: 14ch; }
.messages td { overflow-wrap: anywhere; }
@media (min-width: 641px) { .messages th:first-child { width: 34%; } }