/* Per-service pages (pd-): /features/built-in-services/{slug}.
   Loaded after builtin_services.css, whose pa- vocabulary (tokens bridge,
   hero type, pills, badges, the mock specimens) this page reuses. Everything
   below the hero is long-form reference: page nav, sections, tables. */

/* ---- Hero: copy left, the hub's mock specimen right ---- */
.pd-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.6rem; align-items: center; padding: 4.25rem 0 0.5rem; }
.pd-hero .pa-title { font-size: 2.9rem; max-width: none; }
.pd-crumbs a { color: inherit; text-decoration: none; }
.pd-crumbs a:hover { color: var(--yb-text); }
.pd-hero-copy { min-width: 0; }
.pd-mockcol { min-width: 0; }
.pd-mockcap { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-muted2); margin-top: 0.7rem; text-align: right; }

/* ---- At a glance ---- */
.pd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-top: 2.2rem; }
.pd-fact { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 10px; padding: 0.9rem 1.05rem; }
.pd-fact-v { font-family: var(--disp); font-weight: 700; font-size: 1.6rem; line-height: 1.05; color: var(--yb-text); }
.pd-fact-k { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-muted2); margin-top: 6px; }

/* ---- Body: sticky page nav + sections ---- */
.pd-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2.6rem; margin-top: 2.6rem; align-items: start; }
.pd-toc { position: sticky; top: calc(var(--nav-height, 64px) + 1.4rem); display: flex; flex-direction: column; gap: 0.1rem; }
.pd-toc-lab { font-family: var(--disp); font-weight: 600; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--yb-cyan); padding: 0 0.7rem 0.55rem; }
.pd-toc a { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yb-muted2); padding: 0.38rem 0.7rem; border-left: 2px solid var(--yb-border); text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }
.pd-toc a:hover { color: var(--yb-text); }
.pd-toc a.on { color: var(--yb-gold-light); border-left-color: var(--yb-gold); }
.pd-main { min-width: 0; }
.pd-sec { padding: 2.3rem 0; border-top: 1px solid var(--yb-border); scroll-margin-top: calc(var(--nav-height, 64px) + 1rem); }
.pd-sec:first-child { border-top: none; padding-top: 0; }
.pd-sec-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.55rem; }
.pd-sec-idx { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--yb-gold-light); flex: none; }
.pd-h2 { font-family: var(--disp); font-weight: 700; font-size: 1.7rem; line-height: 1.15; }
.pd-sec-lede { color: var(--yb-muted); font-size: 0.98rem; line-height: 1.65; max-width: 46rem; margin-bottom: 1.4rem; }

/* ---- How it works ---- */
.pd-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; }
.pd-step { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 10px; padding: 1rem 1.05rem; }
.pd-step-n { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.18em; color: var(--yb-cyan); }
.pd-step-t { font-family: var(--disp); font-weight: 600; font-size: 1rem; margin: 0.4rem 0 0.3rem; }
.pd-step-x { font-size: 0.86rem; line-height: 1.55; color: var(--yb-muted); }

/* ---- Everything it does ---- */
.pd-group + .pd-group { margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px dashed rgba(96,128,210,0.18); }
.pd-h3 { font-family: var(--disp); font-weight: 600; font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.3rem; }
.pd-group-intro { font-size: 0.9rem; color: var(--yb-muted); line-height: 1.55; margin-bottom: 0.9rem; max-width: 46rem; }
.pd-items { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.5rem; }
.pd-item { position: relative; padding-left: 1.15rem; font-size: 0.88rem; line-height: 1.55; color: var(--yb-muted); }
.pd-item::before { content: ''; position: absolute; left: 0; top: 0.48em; width: 7px; height: 7px; background: var(--yb-gold-bg); border: 1px solid var(--yb-gold); }
.pd-item b { color: var(--yb-text); font-weight: 600; }
.pd-main code { font-family: var(--mono); font-size: 0.8em; background: var(--yb-overlay-soft); border: 1px solid var(--yb-border); border-radius: 4px; padding: 0.08em 0.4em; color: var(--yb-gold-light); white-space: nowrap; }

/* ---- Tables (commands, limits) ---- */
.pd-scroll { overflow-x: auto; }
/* On a phone both tables are wider than the screen and the cut-off right
   edge reads as the end of the table. Say that it scrolls. */
@media (max-width: 480px) {
  .pd-scroll::before { content: 'Swipe sideways to see the whole table'; display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-muted2); padding: 0 0 0.45rem; }
}
.pd-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.pd-table th { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: left; color: var(--yb-muted2); padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--yb-border2); white-space: nowrap; }
.pd-table td { padding: 0.6rem 0.65rem; border-bottom: 1px dashed rgba(96,128,210,0.14); vertical-align: top; color: var(--yb-muted); line-height: 1.5; }
.pd-table tr:last-child td { border-bottom: none; }
.pd-table td:first-child { color: var(--yb-text); white-space: nowrap; }
.pd-who { display: inline-block; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; background: var(--yb-cyan-bg); border: 1px solid var(--yb-cyan-dim); color: var(--yb-cyan); white-space: nowrap; }
.pd-who-staff { background: var(--yb-gold-bg); border-color: var(--yb-gold-dim); color: var(--yb-gold-light); }

/* ---- Dashboard areas ---- */
.pd-dash { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.pd-dash-card { background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 10px; padding: 0.9rem 1rem; }
.pd-dash-t { font-family: var(--disp); font-weight: 600; font-size: 0.95rem; margin-bottom: 0.25rem; }
.pd-dash-x { font-size: 0.86rem; line-height: 1.55; color: var(--yb-muted); }

/* ---- Works with ---- */
.pd-with { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.pd-with a { display: flex; gap: 0.8rem; align-items: flex-start; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 10px; padding: 0.85rem 1rem; text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.pd-with a:hover { border-color: var(--yb-border2); }
.pd-with .pa-rail-ic { margin-top: 2px; }
.pd-with-t { font-family: var(--disp); font-weight: 600; font-size: 0.95rem; }
.pd-with-x { font-size: 0.84rem; line-height: 1.5; color: var(--yb-muted); margin-top: 2px; }

/* ---- What it does not do ---- */
.pd-not { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.pd-not li { position: relative; padding-left: 1.3rem; font-size: 0.88rem; line-height: 1.55; color: var(--yb-muted); }
.pd-not li::before { content: ''; position: absolute; left: 1px; top: 0.62em; width: 8px; height: 1px; background: var(--yb-muted2); }

/* ---- FAQ ---- */
.pd-faq details { border-top: 1px solid var(--yb-border); }
.pd-faq details:last-child { border-bottom: 1px solid var(--yb-border); }
.pd-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--disp); font-weight: 600; font-size: 1rem; padding: 0.9rem 0.2rem; cursor: pointer; list-style: none; color: var(--yb-text); }
.pd-faq summary::-webkit-details-marker { display: none; }
.pd-faq summary::after { content: '+'; font-family: var(--mono); color: var(--yb-gold-light); flex: none; }
.pd-faq details[open] summary::after { content: '–'; }
.pd-faq p { font-size: 0.9rem; line-height: 1.6; color: var(--yb-muted); padding: 0 0.2rem 1rem; max-width: 46rem; }

/* ---- Related ---- */
.pd-related { display: grid; gap: 0.5rem; }
.pd-related a { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.9rem; background: var(--yb-abyss); border: 1px solid var(--yb-border); border-radius: 9px; text-decoration: none; color: var(--yb-text); font-size: 0.9rem; transition: border-color 0.15s ease; }
.pd-related a:hover { border-color: var(--yb-border2); }
.pd-kind { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yb-muted2); flex: none; width: 6.4rem; }

/* ---- All ten + previous/next ---- */
.pd-all { margin-top: 3.2rem; }
.pd-all-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.6rem; }
.pd-all a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border-radius: 9px; border: 1px solid var(--yb-border); background: var(--yb-abyss); color: var(--yb-muted); text-decoration: none; min-width: 0; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.pd-all a:hover { background: var(--yb-overlay-soft); color: var(--yb-text); }
.pd-all a.on { background: var(--yb-gold-bg); border-color: var(--yb-gold-dim); color: var(--yb-text); }
.pd-all .pa-rail-name { font-size: 0.8rem; }
.pd-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1rem; }
.pd-pn a { display: block; padding: 0.9rem 1.1rem; border: 1px solid var(--yb-border); border-radius: 10px; background: var(--yb-abyss); text-decoration: none; color: inherit; transition: border-color 0.15s ease; }
.pd-pn a:hover { border-color: var(--yb-border2); }
.pd-pn a:last-child { text-align: right; }
.pd-pn-lab { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yb-muted2); }
.pd-pn-name { font-family: var(--disp); font-weight: 600; font-size: 1.05rem; margin-top: 3px; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .pd-body { grid-template-columns: 1fr; gap: 1.6rem; }
  .pd-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.35rem; }
  .pd-toc-lab { width: 100%; padding-left: 0; }
  .pd-toc a { border-left: none; border: 1px solid var(--yb-border); border-radius: 999px; padding: 0.3rem 0.7rem; }
  .pd-toc a.on { border-color: var(--yb-gold-dim); background: var(--yb-gold-bg); }
  .pd-all-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 940px) {
  .pd-hero { grid-template-columns: 1fr; gap: 1.8rem; padding-top: 3rem; }
  .pd-hero .pa-title { font-size: 2.4rem; }
  .pd-mockcap { text-align: left; }
}
@media (max-width: 760px) {
  .pd-facts { grid-template-columns: 1fr 1fr; }
  .pd-items, .pd-dash, .pd-with { grid-template-columns: 1fr; }
  .pd-h2 { font-size: 1.45rem; }
  .pd-all-grid { grid-template-columns: 1fr 1fr; }
  .pd-pn { grid-template-columns: 1fr; }
  .pd-pn a:last-child { text-align: left; }
  .pd-hero .pa-title { font-size: clamp(1.9rem, 6.5vw, 2.3rem); }
}
@media (max-width: 760px) {
  /* Mono labels: legible floor on a phone, nothing below ~10px. */
  .pd-table th, .pd-who, .pd-kind, .pd-fact-k, .pd-step-n, .pd-mockcap, .pd-pn-lab, .pd-toc-lab, .pd-sec-idx { font-size: 0.66rem; }
  /* The section nav wraps into a chip row on phones: chips must be tappable. */
  .pd-toc a { font-size: 0.66rem; padding: 0.7rem 0.75rem; }
}
@media (max-width: 480px) {
  .pd-facts { gap: 0.5rem; }
  .pd-fact { padding: 0.7rem 0.75rem; }
  .pd-fact-v { font-size: 1.3rem; }
  .pd-kind { width: auto; }
  .pd-table td:first-child { white-space: normal; }
}