/* Extra styles for the guide and quick-sheet pages (the HTML files in docs/students and docs/developers).
   Used together with style.css (colours, light and dark mode). The pages are generated from the
   Markdown sources in the src folders by build.sh; edit this file, not the HTML. */

:root {
  --tip-bg: #e6f4f1;   --tip-border: #0f6e56;
  --careful-bg: #fdecec; --careful-border: #b3261e;
  --check-bg: #e9f6ec;  --check-border: #1a7f37;
  --nav-bg: #fff8dc;    --nav-border: #b8860b;
  --explain: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tip-bg: #15302b;   --tip-border: #4fb59a;
    --careful-bg: #381c1e; --careful-border: #f08a8a;
    --check-bg: #17301f;  --check-border: #56c271;
    --nav-bg: #3a3317;    --nav-border: #e0b84a;
    --explain: #f08a8a;
  }
}

.guide .pdf-link { font-weight: 600; }
.guide p.meta { margin: 2px 0 20px; }
.guide p.caption { margin: 6px 0 18px; }
.guide img { max-width: 100%; height: auto; }
.guide li { margin: 3px 0; }
.guide .table-scroll { margin: 12px 0 22px; }
.guide nav.outline ol, .guide nav.outline ul { margin: 4px 0 2px; padding-left: 22px; }
.guide nav.outline ul ul { display: none; }

/* Tip, Careful, Checkpoint boxes (the same three as in the PDFs) */
.guide div.tip, .guide div.careful, .guide div.checkpoint, .guide div.navigate {
  border: 1px solid; border-left-width: 6px; border-radius: 6px; padding: 8px 14px; margin: 16px 0;
}
.guide div.tip::before, .guide div.careful::before, .guide div.checkpoint::before, .guide div.navigate::before {
  display: block; font-weight: 700; margin-bottom: 2px;
}
.guide div.tip        { background: var(--tip-bg);     border-color: var(--tip-border); }
.guide div.careful    { background: var(--careful-bg); border-color: var(--careful-border); }
.guide div.checkpoint { background: var(--check-bg);   border-color: var(--check-border); }
.guide div.navigate   { background: var(--nav-bg);     border-color: var(--nav-border); }
.guide div.tip::before        { content: "Tip";        color: var(--tip-border); }
.guide div.careful::before    { content: "Careful";    color: var(--careful-border); }
.guide div.checkpoint::before { content: "Checkpoint"; color: var(--check-border); }
.guide div.navigate::before   { content: "Navigation";  color: var(--nav-border); }
.guide div.tip > :last-child, .guide div.careful > :last-child, .guide div.checkpoint > :last-child, .guide div.navigate > :last-child { margin-bottom: 0; }

/* Command blocks and their copy buttons */
.guide .codeblock { margin: 12px 0 20px; }
.guide .codeblock pre { margin: 0; padding: 8px 10px; }
.guide .codebar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 0.82rem; color: var(--muted); padding: 0 2px 4px;
}
.guide .cl { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 1.9em; }
.guide .ct { flex: 1 1 auto; white-space: pre; }
.guide .cl.nocopy .ct { color: var(--muted); }
.guide button.copy {
  font: inherit; font-size: 0.78rem; line-height: 1.4; padding: 1px 9px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--link);
}
.guide button.copy:hover, .guide button.copy:focus-visible { border-color: var(--link); }
.guide button.copy.done { color: var(--complete); border-color: var(--complete); }
.guide button.copy-line { position: sticky; right: 0; flex: 0 0 auto; }
.guide button.copy-inline { margin-left: 5px; padding: 0 7px; font-size: 0.72rem; vertical-align: 1px; }

/* Code appendix of the first-analysis guide (::: explain): a line of code with its Copy button,
   and to its right, in red with an arrow, what the line does. Stacked on a phone. */
.guide div.explain {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 8px 22px;
  align-items: start; margin: 0 0 36px;
}
.guide div.explain > .codeblock, .guide div.explain > pre { margin: 0; }
.guide div.explain pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.guide div.explain .codebar span { visibility: hidden; }
.guide div.explain > p {
  position: relative; margin: 0; padding: 30px 0 0 24px; color: var(--explain); line-height: 1.45;
}
.guide div.explain > p::before {
  content: "\2190"; position: absolute; left: 0; top: 27px; font-weight: 700; font-size: 1.15rem;
}
.guide div.explain > p + p { padding-top: 6px; }
.guide div.explain > p + p::before { content: none; }
@media (max-width: 720px) {
  .guide div.explain { grid-template-columns: minmax(0, 1fr); }
  .guide div.explain > p { padding-top: 0; }
  .guide div.explain > p::before { content: "\2191"; top: -3px; }
}

.guide blockquote { margin: 4px 0 18px; padding: 6px 14px; border-left: 4px solid var(--border); background: var(--row-alt); border-radius: 0 6px 6px 0; }
.guide blockquote > :last-child { margin-bottom: 0; }

.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;
}

@media print {
  .guide button.copy, .guide .pdf-link, .guide .codebar span { display: none; }
}
@media (max-width: 560px) {
  .wrap.guide { padding: 16px 12px 48px; }
}

/* "Work with an AI agent" page: the assistant and Codespaces buttons */
.guide p.agent-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.guide p.agent-buttons a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--link); border-radius: 6px;
  text-decoration: none; font-weight: 600;
}
.guide p.agent-buttons a:hover, .guide p.agent-buttons a:focus-visible { background: var(--head-bg); }
.guide button.copy#copy-brief { font-size: 0.95rem; padding: 6px 14px; }

.guide h3 .ico { margin-right: 6px; }
.guide p.logo-note { font-size: 0.85rem; color: var(--muted); }

/* "Routine maintenance": a red box for things that must be done regularly, not once */
.guide div.maintenance {
  background: var(--careful-bg); border: 2px solid var(--careful-border); border-left-width: 8px;
  border-radius: 6px; padding: 8px 14px; margin: 16px 0;
}
.guide div.maintenance::before {
  content: "Routine maintenance"; display: block; font-weight: 800; margin-bottom: 2px;
  color: var(--careful-border); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem;
}
.guide div.maintenance > :last-child { margin-bottom: 0; }

/* One page per guide, with a version for each computer (Windows, macOS, Linux). docs/guide.js shows
   the version for the visitor's system; without JavaScript every version is shown, one after the other. */
.guide .os-switch { display: none; }
.js .guide .os-switch {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 16px; padding: 8px 12px;
  border: 1px solid var(--tip-border); border-radius: 6px; background: var(--tip-bg);
}
.guide .os-switch-label { font-weight: 700; }
.guide .os-switch button {
  font: inherit; padding: 4px 14px; border: 1px solid var(--tip-border); border-radius: 6px;
  background: transparent; color: inherit; cursor: pointer;
}
.guide .os-switch button:hover { background: var(--tip-border); color: var(--tip-bg); }
.guide .os-switch button[aria-pressed="true"] { background: var(--tip-border); color: var(--tip-bg); font-weight: 700; }
.guide .os-switch .os-pdf { margin-left: auto; }
.guide .os-name { margin: 22px 0 0; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tip-border); }
.guide .os-variant + .os-variant { border-top: 3px solid var(--tip-border); margin-top: 28px; }
.js .guide .os-name { display: none; }
.js .guide .os-variant { display: none; }
.js .guide .os-variant.active { display: block; }
.js .guide .os-variant + .os-variant { border-top: 0; margin-top: 0; }
.guide .os-prompt { padding: 10px 14px; border: 1px solid var(--nav-border); border-radius: 6px; background: var(--nav-bg); }
.guide .os-prompt[hidden], .guide .os-pdf[hidden] { display: none; }
@media print {
  .guide .os-switch, .guide .os-prompt { display: none !important; }
}

/* Flower motif on the callout boxes: a small, muted corner cluster (see style.css) */
.guide div.tip, .guide div.careful, .guide div.checkpoint, .guide div.navigate, .guide div.maintenance { position: relative; }
.guide div.tip::after, .guide div.careful::after, .guide div.checkpoint::after, .guide div.navigate::after, .guide div.maintenance::after {
  content: ""; position: absolute; top: 6px; right: 8px; width: 64px; height: 28px; pointer-events: none;
  background: var(--fl-corner) no-repeat right top / contain; opacity: calc(var(--fl-op) * 0.6);
}
@media (max-width: 640px) { .guide div.tip::after, .guide div.careful::after, .guide div.checkpoint::after, .guide div.navigate::after, .guide div.maintenance::after { display: none; } }
@media print { .guide div.tip::after, .guide div.careful::after, .guide div.checkpoint::after, .guide div.navigate::after, .guide div.maintenance::after { display: none !important; } }