/* ============================================================================
   STYLE GUIDE CHROME
   ----------------------------------------------------------------------------
   Styles for the guide itself — specimen frames, code blocks, swatch grids,
   the section rail. NOT part of the design system. Do not copy this file into
   an application; copy journeymro.css.
   ========================================================================== */

/* ── page shell ──────────────────────────────────────────────────────────── */
.guide-main { padding-bottom: 0; }
.guide-layout {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  min-height: calc(100vh - var(--chrome));
}
.guide-rail {
  position: sticky;
  top: var(--band);
  align-self: start;
  max-height: calc(100vh - var(--band));
  overflow-y: auto;
  /* The links use a negative left margin so their text lines up with the
     section head while their padding still sits to the left of it. overflow-y
     clips at the padding box, so with no left padding here that overhang — the
     active wash's left inset AND its 1px rule — was being cut off, leaving the
     label flush against the edge of its own highlight. Padding the rail and
     pulling it back by the same amount lands the overhang exactly on the
     padding edge: nothing moves, nothing clips. */
  padding: 2rem 1.4rem 3rem 0.75rem;
  margin-left: -0.75rem;
  border-right: 1px solid var(--hairline);
}
.guide-rail-head {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.108em;
  text-transform: uppercase;
  color: var(--dim);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0.6rem;
}
.guide-rail-head:not(:first-child) { margin-top: 1.9rem; }
.guide-rail a {
  display: block;
  padding: 0.42rem 0;
  font-size: 1.08rem;
  color: var(--muted);
  border-left: 1px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.75rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.guide-rail a:hover { color: var(--text); }
/* Active section. Cyan text and a 1px rule alone were near-invisible against
   --muted, badly so in the light theme where --cyan darkens to #0e7490 and the
   two colours converge. The wash is the same device .pager-nav button.active
   already uses, and --cyan-rgb is redefined per theme so it tracks both. */
.guide-rail a.active {
  color: var(--cyan);
  border-left-color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.1);
}

.guide-body { padding: 2rem 0 5rem clamp(1.4rem, 3vw, 3rem); min-width: 0; }
.guide-body > section { scroll-margin-top: calc(var(--band) + 1rem); }
.guide-body > section + section { margin-top: 4rem; }

.guide-hero { padding: clamp(2.5rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3.5rem); }
.guide-hero .display { max-width: 18ch; }
.guide-hero p { margin-top: 1.4rem; max-width: 56ch; color: var(--ink-2); font-size: 1.24rem; line-height: 1.75; }

/* ── section headings inside the guide ───────────────────────────────────── */
.g-h2 {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.6rem;
}
.g-h2 .n { font-family: var(--font-mono); font-size: 0.94rem; letter-spacing: 0.18em; color: var(--cyan); }
.g-h2 h2 { font-family: var(--font-heading); font-weight: 300; font-size: clamp(1.54rem, 2.75vw, 2.01rem); letter-spacing: -0.02em; color: var(--text); }
.g-h3 {
  margin: 2.2rem 0 0.9rem;
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.g-note { max-width: 68ch; color: var(--ink-2); font-size: 1.16rem; line-height: 1.75; margin-bottom: 1.2rem; }
.g-note strong { color: var(--text); font-weight: 400; }
.g-note code, .g-inline-code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--cyan);
  background: rgba(var(--cyan-rgb), 0.07);
  padding: 0.08em 0.35em;
}

/* ── specimen ────────────────────────────────────────────────────────────── */
/* A live example inside a hairline box, with its markup underneath. The box
   is hatched so an example with a transparent background still reads as a
   contained specimen rather than as page content. */
.spec { border: 1px solid var(--hairline); margin-bottom: 1.5rem; }
.spec-label {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.89rem;
  letter-spacing: 0.096em;
  text-transform: uppercase;
  color: var(--dim);
}
.spec-stage {
  padding: clamp(1.1rem, 3vw, 2rem);
  background: repeating-linear-gradient(-45deg, var(--hairline-faint) 0 1px, transparent 1px 14px);
}
.spec-stage.plain { background: none; }
.spec-stage.tight { padding: 0; }
.spec-stage.dark-only { background: var(--panel); }
.spec-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.spec-col { display: flex; flex-direction: column; gap: 1rem; }

/* code block */
.spec-code {
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  max-height: 22rem;
  overflow: auto;
}
.spec-code[hidden] { display: none; }
.spec-code pre { padding: 0.9rem 1rem; }
.spec-code code {
  font-family: var(--font-mono);
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink-2);
  white-space: pre;
  tab-size: 2;
}
.spec-toggle {
  font-family: var(--font-heading);
  font-weight: 300;
  font-size: 0.89rem;
  letter-spacing: 0.084em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hairline);
  padding: 0.2rem 0.5rem;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.spec-toggle:hover { color: var(--cyan); border-color: rgba(var(--cyan-rgb), 0.5); }

/* standalone code block, no specimen */
.code-block { border: 1px solid var(--hairline); background: var(--panel); overflow: auto; margin: 1rem 0; max-height: 30rem; }
.code-block pre { padding: 1rem 1.1rem; }
.code-block code { font-family: var(--font-mono); font-size: 0.99rem; line-height: 1.75; color: var(--ink-2); white-space: pre; }

/* ── swatches ────────────────────────────────────────────────────────────── */
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.swatch {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: block;
  width: 100%;
}
.swatch-chip { display: block; height: 64px; border-bottom: 1px solid var(--hairline); position: relative; }
.swatch-chip.checker {
  background-image: linear-gradient(45deg, var(--hairline) 25%, transparent 25%), linear-gradient(-45deg, var(--hairline) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--hairline) 75%), linear-gradient(-45deg, transparent 75%, var(--hairline) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
.swatch-meta { display: block; padding: 0.6rem 0.75rem 0.75rem; }
.swatch-name { display: block; font-family: var(--font-mono); font-size: 0.91rem; letter-spacing: 0.1em; color: var(--text); }
.swatch-val { display: block; font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.06em; color: var(--dim); margin-top: 0.25rem; }
.swatch-use { display: block; font-size: 0.97rem; color: var(--muted); margin-top: 0.4rem; line-height: 1.45; }
.swatch:hover .swatch-name { color: var(--cyan); }
.swatch.copied .swatch-name::after { content: " · copied"; color: var(--ok); }

/* ── token table ─────────────────────────────────────────────────────────── */
.token-table td:first-child { font-family: var(--font-mono); font-size: 0.99rem; color: var(--cyan); white-space: nowrap; }
.token-table td:nth-child(2) { font-family: var(--font-mono); font-size: 0.99rem; color: var(--body); white-space: nowrap; }

/* ── type specimens ──────────────────────────────────────────────────────── */
.type-spec { border-bottom: 1px solid var(--hairline); padding: 1.4rem 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; }
.type-spec .type-meta { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); line-height: 1.8; }
.type-spec .type-meta b { display: block; color: var(--muted); font-weight: 400; }
.glyph-set { font-family: var(--font-heading); font-weight: 300; font-size: 1.63rem; letter-spacing: 0.06em; color: var(--body); line-height: 1.9; word-break: break-all; }

/* ── icon grid ───────────────────────────────────────────────────────────── */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.icon-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem;
  padding: 1.2rem 0.5rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  color: var(--body);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.icon-cell:hover { color: var(--cyan); background: var(--panel-fill); }
.icon-cell svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-cell .n { font-family: var(--font-mono); font-size: 0.87rem; letter-spacing: 0.08em; color: var(--dim); text-align: center; }
.icon-cell.copied .n { color: var(--ok); }

/* ── do / don't ──────────────────────────────────────────────────────────── */
.dd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.dd { border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 1.1rem 1.25rem; }
.dd-head { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading);
  font-weight: 300; font-size: 0.89rem; letter-spacing: 0.096em; text-transform: uppercase; margin-bottom: 0.7rem; }
.dd.do .dd-head { color: var(--ok); }
.dd.dont .dd-head { color: var(--danger); }
.dd p { font-size: 1.1rem; line-height: 1.6; color: var(--body); }

/* ── phone frame (mobile page) ───────────────────────────────────────────── */
.phone-row { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.phone {
  width: 320px;
  max-width: 100%;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  background: var(--bg);
  overflow: hidden;
}
.phone-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.7rem; border-bottom: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.12em; color: var(--dim); }
.phone-screen { height: 480px; overflow-y: auto; position: relative; }
.phone-caption { font-family: var(--font-heading);
  font-weight: 300; font-size: 0.89rem; letter-spacing: 0.084em; text-transform: uppercase; color: var(--dim); margin-top: 0.6rem; }

/* ── home index cards ────────────────────────────────────────────────────── */
.idx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.idx-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.4rem 1.5rem 1.6rem;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--t-fast);
}
.idx-card:hover { background: var(--panel-fill); }
.idx-card .n { font-family: var(--font-mono); font-size: 0.9rem; letter-spacing: 0.18em; color: var(--dim); }
.idx-card:hover .n { color: var(--cyan); }
.idx-card h3 { font-family: var(--font-heading); font-weight: 300; font-size: 1.45rem; letter-spacing: -0.01em; color: var(--text); }
.idx-card p { font-size: 1.07rem; line-height: 1.6; color: var(--muted); }

/* ── guide responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); }

  /* The rail becomes a sticky scrolling strip under the nav rather than a
     block of links the reader has to scroll past to reach the page. */
  .guide-rail {
    position: sticky;
    top: var(--band);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border-right: none;
    border-bottom: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(8px);
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .guide-rail::-webkit-scrollbar { display: none; }
  /* the group headings, and the cross-page links under the second one, are
     desktop affordances — the nav drawer already covers other pages */
  .guide-rail-head { display: none; }
  .guide-rail-head:nth-of-type(2) ~ a { display: none; }
  .guide-rail a {
    flex: 0 0 auto;
    padding: 0.85rem 0;
    margin: 0;
    border-left: none;
    border-bottom: 1px solid transparent;
  }
  .guide-rail a.active { border-left-color: transparent; border-bottom-color: var(--cyan); }

  .guide-body { padding-left: 0; }
  .type-spec { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
}

/* ── phone-frame replicas (mobile page) ──────────────────────────────────── */
/* The real mobile chrome lives inside `@media (max-width: 820px)`, so it will
   not apply inside a 320px box on a desktop viewport. These classes mirror it
   1:1 for demonstration. The live article is the page itself — narrow the
   window past 820px. */
.ph-nav { display:flex; align-items:center; justify-content:space-between; height:52px; padding:0 1rem; border-bottom:1px solid var(--hairline); background:var(--bg); position:sticky; top:0; z-index:2; }
.ph-nav .wordmark { font-size:1.24rem; }
.ph-burger { width:38px; height:38px; margin-right:-.5rem; display:inline-flex; align-items:center; justify-content:center; color:var(--text); }
.ph-burger svg { width:20px; height:20px; }
.ph-crumb { display:flex; align-items:center; gap:.4rem; padding:.7rem 1rem; border-bottom:1px solid var(--hairline); font-family:var(--font-heading);
  font-weight: 300; font-size:0.91rem; letter-spacing: 0.096em; text-transform:uppercase; color:var(--muted); }
.ph-crumb .sep { color:var(--dim); }
.ph-crumb .leaf { color:var(--text); }
.ph-body { padding:1rem; }
.ph-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding:.9rem 0; border-bottom:1px solid var(--hairline); width:100%; text-align:left; }
.ph-row-label { font-family:var(--font-heading); font-weight:300; font-size:1.28rem; letter-spacing:-.01em; color:var(--text); }
.ph-row svg { width:18px; height:18px; color:var(--dim); flex-shrink:0; }
.ph-group-head { display:flex; align-items:baseline; gap:.6rem; padding-bottom:.55rem; border-bottom:1px solid var(--hairline); font-family:var(--font-heading);
  font-weight: 300; font-size:0.91rem; letter-spacing: 0.108em; text-transform:uppercase; color:var(--muted); }
.ph-group-head .idx { color:var(--dim); }
.ph-item { display:block; min-height:52px; padding:.85rem 0; border-bottom:1px solid var(--hairline); font-family:var(--font-heading); font-weight:300; font-size:1.21rem; color:var(--body); }
.ph-target { outline:1px dashed rgba(var(--cyan-rgb),.45); outline-offset:0; }

/* A specimen that is inherently desktop-width (the nav band) scrolls inside
   its own stage rather than pushing the page sideways. */
.spec-stage.scroll-x { overflow-x: auto; }
.spec-stage.scroll-x > * { min-width: 30rem; }

/* The wordmark is a flex lockup, so the size caption beside each specimen is a
   flex item and cannot wrap on its own. At the larger caption size it runs past
   a phone viewport; let it drop to a second line instead. */
.spec-col .wordmark { flex-wrap: wrap; }

/* Asset filenames are long unbreakable tokens; at the larger mono size they
   run past their grid cell. Let them break rather than spill. */
.mono { overflow-wrap: anywhere; }

/* Hitting the end of the document rubber-banded the whole page, sticky header
   and all, then sprang back. Pinning overscroll holds the frame still at both
   ends. Scoped to the guide deliberately: journeymro.css is the shared product
   stylesheet and this changes scroll feel, not appearance. */
html {
  overscroll-behavior-y: none;
}