/* Guide refresh: the documentation in the same language as the homepage and the platform.
   - Keys sit in grooves cut into the surface; choices sit in recessed tracks with the
     current one lit; places you type and read-only counts are sunk in.
   - Cards, notes, and panels are crisp slabs with a sharp top edge.
   - The small monospace tags give way to plain labels in the body face, and the ones
     that only decorate are gone.
   Style only: the guide's content and scripts are unchanged. Loaded after guide.css and
   tactile.css. */

:root {
  /* A groove drawn around a key without extra markup: the channel floor, a shaded top
     edge, the channel's rim, and a lit lip below it. Keys that use it keep 5px clear. */
  --groove-shade: #000000cc;
  --slab: inset 0 1px 0 #ffffff0f, 0 1px 2px #00000066;
  --pressed-row: inset 0 1px 3px #00000066;
}

:root.theme-light {
  --groove-shade: #00000030;
  --slab: inset 0 1px 0 #ffffffb3, 0 1px 2px #0000000f;
  --pressed-row: inset 0 1px 3px #00000024;
}

.guide-page {
  --groove:
    0 0 0 4px var(--track),
    0 -1px 0 4px var(--groove-shade),
    0 0 0 5px var(--track-border),
    0 1px 0 5px var(--track-lip);
  /* The same cut, wider, around the round play keys. */
  --socket:
    0 0 0 6px var(--track),
    0 -1px 0 6px var(--groove-shade),
    0 0 0 7px var(--track-border),
    0 1px 0 7px var(--track-lip);
}

/* --- Type: headings as on the homepage, labels in the body face -------------------- */

.guide-page :is(h1, h2, h3, h4) {
  letter-spacing: -0.035em;
}

.guide-page h1 {
  text-wrap: balance;
}

.guide-page .guide-intro h1 {
  letter-spacing: -0.05em;
}

.guide-page :is(
    .micro,
    .eyebrow,
    .path-step-number,
    .progress-ring > span,
    .walkthrough-time,
    .walkthrough-length,
    .walkthrough-switch .tool-button span,
    .walkthrough-filters b,
    .walkthrough-play-label small,
    .walkthrough-chapters button > span,
    .walkthrough-chapters time,
    .article-meta span,
    .guide-search kbd,
    .path-watch,
    .checklist-count,
    .walkthrough-track
  ) {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* Labels that head a list read as a quiet sentence instead of a shouted tag. */
.guide-page :is(
    .guide-context .micro,
    .article-contents > .micro,
    .walkthrough-head .micro,
    .walkthrough-card-copy .micro,
    .article-pagination .micro,
    .interactive-card > .micro,
    .resume-card .micro,
    .walkthrough-dialog .dialog-header .micro
  ) {
  display: block;
}

.guide-page :is(
    .guide-context .micro,
    .article-contents > .micro,
    .walkthrough-head .micro,
    .walkthrough-card-copy .micro,
    .article-pagination .micro,
    .interactive-card > .micro,
    .resume-card .micro,
    .walkthrough-dialog .dialog-header .micro,
    .path-watch,
    .walkthrough-track,
    .article-meta span
  ) {
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: lowercase;
  color: var(--faint);
}

.guide-page :is(
    .guide-context .micro,
    .article-contents > .micro,
    .walkthrough-head .micro,
    .walkthrough-card-copy .micro,
    .article-pagination .micro,
    .interactive-card > .micro,
    .resume-card .micro,
    .walkthrough-dialog .dialog-header .micro,
    .path-watch,
    .walkthrough-track,
    .article-meta span
  )::first-letter {
  text-transform: uppercase;
}

.guide-page .walkthrough-track {
  display: block;
  font-size: 0.875rem;
  opacity: 1;
}

.guide-page :is(.article-meta span, .path-watch) {
  display: inline-block;
}

.guide-page .path-watch {
  margin-top: 8px;
  color: var(--accent);
}

/* --- Tags that only decorate --------------------------------------------------------- */

.guide-page :is(
    .guide-header-label,
    .guide-view .eyebrow,
    .guide-facts,
    .guide-section-label .micro,
    .path-icon,
    .sidebar-heading .micro,
    .nav-part summary > span:first-child,
    .article-tools > .micro,
    .article-meta span:last-child,
    .chapter-grid .micro,
    .quick-links a > span,
    .guide-context > .micro:first-child
  ) {
  display: none !important;
}

.guide-page .path-card::before {
  content: none;
}

.guide-page .sidebar-heading {
  justify-content: flex-end;
}

/* --- Header: the source key in its groove -------------------------------------------- */

.guide-page .guide-header-actions {
  gap: 18px;
}

.guide-page .guide-header-actions .button {
  margin-inline: 5px;
  border-radius: 11px;
  box-shadow: var(--lit-shadow), var(--groove);
}

.guide-page .guide-header-actions .button:hover {
  box-shadow: var(--lit-hover-shadow), var(--groove);
}

.guide-page .guide-header-actions .button:active {
  box-shadow: var(--lit-pressed), var(--groove);
}

.guide-page .top-link {
  font-size: 0.8125rem;
  transition: color 0.2s;
}

.guide-page .top-link:hover {
  color: var(--text);
}

/* --- Sidebar ------------------------------------------------------------------------- */

/* The search field is sunk into the surface; its shortcut is a small keycap. */
.guide-page .guide-search input {
  border: 1px solid var(--track-border);
  border-radius: 12px;
  background: var(--track);
  box-shadow: var(--track-shadow);
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.guide-page .guide-search input:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow:
    var(--track-shadow),
    inset 0 0 0 1px var(--accent);
}

.guide-page .guide-search kbd {
  top: 11px;
  right: 10px;
  min-width: 22px;
  padding: 1px 6px;
  border: 1px solid var(--key-border);
  border-radius: 6px;
  background: var(--key);
  box-shadow: var(--raised);
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
}

.guide-page .search-submit {
  border: 1px solid var(--key-border);
  border-radius: 10px;
  background: var(--key);
  color: var(--text);
  box-shadow: var(--raised);
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.guide-page .search-submit:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--key-border));
  background: var(--key);
  box-shadow: var(--raised-hover);
}

.guide-page .search-submit:active {
  box-shadow: var(--pressed);
  transform: translateY(1px);
}

/* Guide home, walkthroughs, and saved topics share one recessed track; the page you
   are on is the lit key. */
.guide-page .side-top {
  display: grid;
  gap: 2px;
  margin: 22px 0 18px;
  padding: 4px;
  border: 1px solid var(--track-border);
  border-radius: 14px;
  background: var(--track);
  box-shadow: var(--track-shadow);
}

.guide-page .side-top > :is(a, button) {
  border: 1px solid transparent;
  border-radius: 10px;
  transition:
    color 0.2s,
    background 0.2s;
}

.guide-page .side-top > :is(a, button):hover {
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.guide-page .side-top > [aria-current="page"],
.guide-page .side-top > [aria-pressed="true"] {
  border-color: var(--lit-border);
  background: var(--lit);
  color: #fff;
  box-shadow: var(--lit-shadow);
}

.guide-page .side-top > [aria-current="page"] > :is(b, span),
.guide-page .side-top > [aria-pressed="true"] > :is(b, span) {
  color: inherit;
}

/* Counts are engraved into the key. */
.guide-page .side-button > b {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  font-size: 11px;
  text-align: center;
}

.guide-page .side-top > [aria-current="page"] > b,
.guide-page .side-top > [aria-pressed="true"] > b {
  background: #ffffff2e;
}

.guide-page .nav-part summary {
  border-radius: 10px;
  padding-inline: 8px;
  transition: background 0.2s;
}

.guide-page .nav-part summary:hover {
  background: color-mix(in srgb, var(--surface) 75%, transparent);
}

.guide-page .nav-part a {
  border-radius: 9px;
  transition:
    background 0.2s,
    color 0.2s;
}

/* The topic you are reading is pressed in. */
.guide-page .nav-part a.active {
  background: var(--track);
  color: var(--accent);
  box-shadow: var(--pressed-row);
}

.guide-page .is-read .topic-state {
  background: var(--lit);
  border-color: var(--lit-border);
}

/* --- Slabs: notes, cards, and panels --------------------------------------------------- */

.guide-page :is(
    .guide-start-note,
    .article-start,
    .article-complete,
    .resume-card,
    .interactive-card,
    .callout,
    .mini-grid > div,
    .lesson-guide-section,
    .walkthrough-block
  ) {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--slab);
}

.guide-page .guide-start-note {
  border-left-width: 1px;
}

.guide-page .callout.warning {
  border-color: #c7a67550;
  background: color-mix(in srgb, var(--surface) 93%, #c7a675);
}

.guide-page .lesson-guide-section {
  border-radius: 14px;
  padding: 12px 16px;
}

/* Role paths and chapters: slabs that lift a little under the pointer, with a round key
   that lights when the card is the target. */
.guide-page .path-card {
  border-radius: 16px;
  box-shadow: var(--slab);
  transition:
    transform 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

.guide-page .path-card:hover {
  transform: translateY(-3px);
  box-shadow:
    var(--slab),
    0 18px 40px -24px color-mix(in srgb, var(--accent) 70%, transparent);
}

.guide-page .path-card h3 {
  margin-top: 4px;
}

.guide-page .path-bottom > span:last-child,
.guide-page .article-pagination a .site-icon {
  transition:
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
}

.guide-page .path-bottom > span:last-child {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--key-border);
  border-radius: 10px;
  background: var(--key);
  box-shadow: var(--raised);
}

.guide-page .path-card:hover .path-bottom > span:last-child {
  border-color: var(--lit-border);
  background: var(--lit);
  color: #fff;
  box-shadow: var(--lit-shadow);
}

.guide-page .chapter-grid {
  gap: 10px;
  border: 0;
}

.guide-page .chapter-grid a {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--slab);
  transition:
    border-color 0.3s,
    background 0.3s;
}

.guide-page .chapter-grid a:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
}

.guide-page .chapter-grid h3 {
  margin-top: 0;
}

.guide-page .quick-links a {
  padding-inline: 4px;
}

.guide-page .article-pagination a {
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--slab);
  transition: border-color 0.3s;
}

/* --- Topic tools: one well of raised keys, saved is lit ---------------------------- */

.guide-page .article-tools > div {
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--track-border);
  border-radius: 14px;
  background: var(--track);
  box-shadow: var(--track-shadow);
}

.guide-page .article-tools {
  justify-content: flex-end;
}

.guide-page :is(.article-tools, .walkthrough-dialog) .tool-button,
.guide-page .copy-code,
.guide-page .docs-menu {
  border: 1px solid var(--key-border);
  border-radius: 10px;
  background: var(--key);
  color: var(--text);
  box-shadow: var(--raised);
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.guide-page :is(.article-tools, .walkthrough-dialog) .tool-button:hover,
.guide-page .copy-code:hover,
.guide-page .docs-menu:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--key-border));
  background: var(--key);
  box-shadow: var(--raised-hover);
}

.guide-page :is(.article-tools, .walkthrough-dialog) .tool-button:active,
.guide-page .copy-code:active,
.guide-page .docs-menu:active {
  box-shadow: var(--pressed);
  transform: translateY(1px);
}

.guide-page .article-tools .tool-button[aria-pressed="true"] {
  border-color: var(--lit-border);
  background: var(--lit);
  color: #fff;
  box-shadow: var(--lit-shadow);
}

/* The phone menu key sits in its groove like the header key. */
.guide-page .docs-menu {
  margin-inline: 5px;
  box-shadow: var(--raised), var(--groove);
}

.guide-page .docs-menu:hover {
  box-shadow: var(--raised-hover), var(--groove);
}

.guide-page .docs-menu[aria-expanded="true"] {
  box-shadow: var(--pressed), var(--groove);
}

/* "On this page" jumps are small raised keys. */
.guide-page .article-contents {
  gap: 6px;
}

.guide-page .article-contents button {
  padding: 6px 12px;
  border: 1px solid var(--key-border);
  border-radius: 9px;
  background: var(--key);
  color: var(--muted);
  box-shadow: var(--raised);
  transition:
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
}

.guide-page .article-contents button:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--key-border));
  color: var(--text);
  box-shadow: var(--raised-hover);
}

/* Mark as read: the lit key in its groove; once read it stays pressed in. */
.guide-page .article-complete .button {
  margin: 5px;
  border-radius: 11px;
  box-shadow: var(--lit-shadow), var(--groove);
}

.guide-page .article-complete .button:hover {
  box-shadow: var(--lit-hover-shadow), var(--groove);
}

.guide-page .article-complete .button[aria-pressed="true"] {
  filter: brightness(0.94);
  box-shadow: var(--lit-pressed), var(--groove);
}

/* --- Choices: recessed tracks with the current one lit -------------------------------- */

.guide-page :is(.walkthrough-switch, .lesson-path-tabs, .walkthrough-filters) {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--track-border);
  border-radius: 14px;
  background: var(--track);
  box-shadow: var(--track-shadow);
}

.guide-page .walkthrough-filters {
  display: flex;
  width: fit-content;
  margin-bottom: 30px;
}

.guide-page :is(.walkthrough-switch .tool-button, .lesson-path-tabs button, .walkthrough-filters a) {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  transition:
    color 0.2s,
    background 0.2s;
}

.guide-page :is(.walkthrough-switch .tool-button, .lesson-path-tabs button, .walkthrough-filters a):hover {
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--text);
}

.guide-page :is(
    .walkthrough-switch .tool-button[aria-pressed="true"],
    .lesson-path-tabs button[aria-selected="true"],
    .walkthrough-filters a[aria-current="page"]
  ) {
  border-color: var(--lit-border);
  background: var(--lit);
  color: #fff;
  box-shadow: var(--lit-shadow);
}

.guide-page :is(
    .walkthrough-switch .tool-button[aria-pressed="true"] span,
    .walkthrough-filters a[aria-current="page"] b
  ) {
  color: #ffffffb3;
}

.guide-page .walkthrough-filters b {
  font-size: 11px;
}

/* --- Video: lit play keys seated in round sockets -------------------------------------- */

.guide-page .walkthrough-play-icon {
  border: 1px solid var(--lit-border);
  background: var(--lit);
  color: #fff;
  box-shadow:
    var(--lit-shadow),
    var(--socket),
    0 12px 30px #0000004d;
}

.guide-page .walkthrough-play:hover .walkthrough-play-icon,
.guide-page .walkthrough-play:focus-visible .walkthrough-play-icon {
  box-shadow:
    var(--lit-hover-shadow),
    var(--socket),
    0 14px 36px #00000059;
}

.guide-page .walkthrough-thumb {
  border-radius: 12px;
}

.guide-page .walkthrough-thumb-play {
  border: 1px solid var(--lit-border);
  background: var(--lit);
  color: #fff;
  box-shadow:
    var(--lit-shadow),
    var(--groove);
}

.guide-page .walkthrough-stage {
  border-radius: 12px;
}

/* --- Learning paths -------------------------------------------------------------------- */

.guide-page .path-step-number {
  border: 1px solid var(--track-border);
  border-radius: 12px;
  background: var(--track);
  box-shadow: var(--track-shadow);
  font-size: 0.8125rem;
}

/* Progress bars are a recessed track with a lit fill. */
.guide-page .path-progress progress {
  height: 8px;
  overflow: hidden;
  border: 1px solid var(--track-border);
  border-radius: 999px;
  background: var(--track);
  box-shadow: var(--track-shadow);
  appearance: none;
}

.guide-page .path-progress progress::-webkit-progress-bar {
  background: transparent;
}

.guide-page .path-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: var(--lit);
}

.guide-page .path-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: var(--lit);
}

/* --- Reading progress: a recessed dial with a lit arc ------------------------------------ */

.guide-page .progress-ring {
  background: conic-gradient(var(--key-teal) var(--progress), var(--track) 0);
  box-shadow: var(--track-shadow);
}

.guide-page .progress-ring::before {
  inset: 6px;
  background: var(--surface);
  box-shadow: var(--slab);
}

.guide-page .progress-ring > span {
  font-size: 1.125rem;
  font-weight: 600;
}

/* --- Code and checklists ----------------------------------------------------------------- */

.guide-page .code-wrap pre {
  border-color: var(--track-border);
  border-radius: 14px;
  background: var(--track);
  box-shadow: var(--track-shadow);
}

.guide-page .copy-code {
  top: 10px;
  right: 10px;
}

.guide-page :is(.check-row, .policy-switches label) input {
  accent-color: var(--key-teal);
}

.guide-page .policy-result {
  border-radius: 12px;
}

/* --- Dialogs ----------------------------------------------------------------------------- */

.guide-page .reset-dialog .button-row {
  width: fit-content;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--track-border);
  border-radius: 16px;
  background: var(--track);
  box-shadow: var(--track-shadow);
}

.guide-page .reset-dialog .button-row .button {
  border-radius: 11px;
}

.guide-page #closeWalkthrough {
  display: grid;
  place-items: center;
  margin: 5px;
  border-radius: 11px;
  box-shadow: var(--raised), var(--groove);
}

/* --- Readable sizes: the smallest guide text was 7–9px --------------------------------- */

.guide-page :is(.guide-breadcrumbs, .guide-footer, .guide-footer a, .guide-footer .text-button, .sidebar-heading .text-button) {
  font-size: 0.75rem;
}

/* With readable sizes the footer no longer fits one phone line; let it wrap. */
.guide-page .guide-footer {
  flex-wrap: wrap;
  row-gap: 10px;
}

.guide-page #contextLinks > .micro {
  margin-bottom: 8px;
  font-size: 0.75rem;
}

.guide-page :is(.nav-part a, #contextLinks > a, .tool-button) {
  font-size: 0.75rem;
}

.guide-page :is(.article-complete p, .progress-note) {
  font-size: 0.75rem;
}

.guide-page .article-complete .button {
  font-size: 0.8125rem;
}

.guide-page :is(.walkthrough-chapters button > span, .walkthrough-chapters time, .walkthrough-length) {
  font-size: 0.6875rem;
}

.guide-page :is(.path-progress, .path-steps p, .interactive-card p) {
  font-size: 0.8125rem;
}

.guide-page .checklist-count {
  font-size: 0.75rem;
}

/* --- Phones: the topic tools fill their well evenly ------------------------------------ */

@media (max-width: 600px) {
  .guide-page .article-tools > div {
    width: 100%;
  }

  .guide-page .article-tools .tool-button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* --- Motion ------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .guide-page .path-card:hover {
    transform: none;
  }
}