/* ==========================================================================
   dcx — Documentation layout
   Namespace: dcx-  |  Scoped tokens only, no :root writes, no element selectors
   ========================================================================== */

.dcx-docs{
  /* ---- scoped tokens ---- */
  --dcx-ink:#1f1f1f;
  --dcx-body:#3c4043;
  --dcx-muted:#5f6368;
  --dcx-faint:#80868b;

  --dcx-line:#e3e6ea;
  --dcx-line-soft:#eef1f4;
  --dcx-page:#ffffff;

  --dcx-accent:#1a73e8;
  --dcx-accent-soft:#eaf1fe;
  --dcx-active-bg:#f1f5fd;

  --dcx-code-bg:#f6f8fa;
  --dcx-code-ink:#1f1f1f;
  --dcx-pre-bg:#f6f8fa;

  --dcx-note-bg:#f4f8ff;
  --dcx-note-line:#c6dafc;
  --dcx-warn-bg:#fff8f0;
  --dcx-warn-line:#f7cfa0;
  --dcx-warn-ink:#a1580d;

  /* MUST match the rendered height of your sticky <x-home-header />.
     If the header is not sticky, set this to 0px. */
  --dcx-header-h:72px;

  --dcx-side-w:300px;
  --dcx-toc-w:272px;

  /* Sidebar inset from the viewport edge.
     0px  = flush left (current)
     16px = small breathing room, closer to the reference screenshot */
  --dcx-side-pad-l:0px;

  --dcx-gutter:clamp(20px, 3vw, 48px);
  --dcx-article-w:820px;

  --dcx-font:'DM Sans','Helvetica Neue',Arial,sans-serif;
  --dcx-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --dcx-ease:cubic-bezier(.2,.7,.2,1);

  background:var(--dcx-page);
  color:var(--dcx-ink);
  font-family:var(--dcx-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.dcx-docs,
.dcx-docs *,
.dcx-docs *::before,
.dcx-docs *::after{
  box-sizing:border-box;
}


/* ==========================================================================
   LAYOUT
   Full-bleed. No max-width, no auto margins — that centring was pushing the
   sidebar inward on any viewport wider than the old 1600px cap.
   Reading width is controlled by .dcx-article, not by the shell.
   ========================================================================== */

.dcx-layout{
  display:grid;
  grid-template-columns:var(--dcx-side-w) minmax(0, 1fr) var(--dcx-toc-w);
  align-items:start;
  width:100%;
}


/* ==========================================================================
   SIDEBAR
   ========================================================================== */

.dcx-side{
  position:sticky;
  top:var(--dcx-header-h);
  height:calc(100vh - var(--dcx-header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:24px 12px 64px var(--dcx-side-pad-l);
  border-right:1px solid var(--dcx-line);
  scrollbar-width:thin;
  scrollbar-color:#c9ced4 transparent;
}
.dcx-side::-webkit-scrollbar{ width:10px; }
.dcx-side::-webkit-scrollbar-track{ background:transparent; }
.dcx-side::-webkit-scrollbar-thumb{
  background:#c9ced4;
  border:3px solid var(--dcx-page);
  border-radius:99px;
}
.dcx-side::-webkit-scrollbar-thumb:hover{ background:#aeb4bb; }

/* ---- filter (markup currently removed from the Blade; rules kept so the
        block can be dropped back in without touching this file) ---- */
.dcx-search{
  position:relative;
  display:flex;
  align-items:center;
  margin:0 0 18px 14px;
}
.dcx-search-ico{
  position:absolute;
  left:12px;
  color:var(--dcx-faint);
  pointer-events:none;
}
.dcx-search-input{
  width:100%;
  padding:10px 34px 10px 38px;
  border:1px solid var(--dcx-line);
  border-radius:10px;
  background:var(--dcx-page);
  color:var(--dcx-ink);
  font-family:inherit;
  font-size:14px;
  line-height:1.3;
  outline:none;
  transition:border-color .16s ease, box-shadow .16s ease;
  -webkit-appearance:none;
  appearance:none;
}
.dcx-search-input::-webkit-search-cancel-button{ display:none; }
.dcx-search-input::placeholder{ color:var(--dcx-faint); }
.dcx-search-input:focus{
  border-color:var(--dcx-accent);
  box-shadow:0 0 0 3px rgba(26,115,232,.14);
}
.dcx-search-clear{
  position:absolute;
  right:8px;
  width:22px;
  height:22px;
  padding:0;
  border:0;
  border-radius:99px;
  background:transparent;
  color:var(--dcx-muted);
  font-size:19px;
  line-height:1;
  cursor:pointer;
}
.dcx-search-clear:hover{ background:var(--dcx-line-soft); color:var(--dcx-ink); }

.dcx-empty{
  margin:8px 0 0 24px;
  font-size:14px;
  color:var(--dcx-muted);
}

/* ---- tree ---- */
.dcx-tree,
.dcx-sub{
  margin:0;
  padding:0;
  list-style:none;
}

.dcx-node{ margin:0; }

.dcx-link{
  display:block;
  position:relative;
  padding:9px 14px 9px 26px;
  border-radius:0 99px 99px 0;
  color:var(--dcx-body);
  font-size:15px;
  font-weight:400;
  line-height:1.35;
  text-decoration:none;
  transition:background-color .14s ease, color .14s ease;
}
.dcx-link:hover{ background:var(--dcx-line-soft); color:var(--dcx-ink); }
.dcx-link:focus-visible{
  outline:2px solid var(--dcx-accent);
  outline-offset:-2px;
}

.dcx-link-top{
  padding-left:18px;
  font-size:15.5px;
  color:var(--dcx-ink);
}

.dcx-link-on{
  background:var(--dcx-active-bg);
  color:var(--dcx-ink);
  font-weight:500;
}
.dcx-link-on::before{
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:6px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--dcx-ink);
}
.dcx-link-on:hover{ background:var(--dcx-active-bg); }

/* ---- group (native details, no JS) ---- */
.dcx-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px 10px 18px;
  border-radius:0 10px 10px 0;
  color:var(--dcx-ink);
  font-size:15.5px;
  font-weight:400;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  transition:background-color .14s ease;
}
.dcx-group-head::-webkit-details-marker{ display:none; }
.dcx-group-head:hover{ background:var(--dcx-line-soft); }
.dcx-group-head:focus-visible{
  outline:2px solid var(--dcx-accent);
  outline-offset:-2px;
}

.dcx-group-label{ flex:1 1 auto; min-width:0; }

.dcx-chip{
  flex:0 0 auto;
  padding:3px 9px;
  border-radius:99px;
  background:var(--dcx-accent-soft);
  color:var(--dcx-accent);
  font-family:var(--dcx-mono);
  font-size:11.5px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.01em;
  white-space:nowrap;
}

.dcx-caret{
  flex:0 0 auto;
  color:var(--dcx-muted);
  transition:transform .18s var(--dcx-ease);
}
.dcx-group[open] > .dcx-group-head > .dcx-caret{ transform:rotate(90deg); }

.dcx-sub{
  margin:2px 0 6px;
  padding-left:12px;
}

/* filter hides */
.dcx-hide{ display:none !important; }


/* ==========================================================================
   MAIN
   ========================================================================== */

.dcx-main{
  min-width:0;
  padding:34px var(--dcx-gutter) 90px;
}

.dcx-crumb{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:15px;
  line-height:1.4;
}
.dcx-crumb-link{
  color:var(--dcx-muted);
  text-decoration:none;
}
.dcx-crumb-link:hover{ color:var(--dcx-ink); text-decoration:underline; }
.dcx-crumb-sep{ color:var(--dcx-faint); }
.dcx-crumb-now{ color:var(--dcx-ink); font-weight:500; }

.dcx-article{
  max-width:var(--dcx-article-w);
  margin-top:clamp(28px, 4vw, 52px);
}

.dcx-h1,
.dcx-h2{
  scroll-margin-top:calc(var(--dcx-header-h) + 24px);
}

.dcx-h1{
  margin:0 0 clamp(24px, 3vw, 40px);
  font-size:clamp(2rem, 3.4vw, 3rem);
  font-weight:400;
  line-height:1.12;
  letter-spacing:-.022em;
  color:var(--dcx-ink);
  text-wrap:balance;
}

.dcx-h2{
  margin:clamp(38px, 4.4vw, 60px) 0 16px;
  font-size:clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.008em;
  color:var(--dcx-ink);
}

.dcx-p{
  margin:0 0 16px;
  font-size:17px;
  font-weight:400;
  line-height:1.75;
  color:var(--dcx-body);
}
.dcx-p:last-child{ margin-bottom:0; }

.dcx-ul{
  margin:0 0 20px;
  padding-left:26px;
  list-style:disc;
}
.dcx-li{
  margin-bottom:10px;
  font-size:17px;
  line-height:1.75;
  color:var(--dcx-body);
}
.dcx-li::marker{ color:var(--dcx-faint); }
.dcx-li:last-child{ margin-bottom:0; }

.dcx-strong{ font-weight:600; color:var(--dcx-ink); }

.dcx-a{
  color:var(--dcx-ink);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.dcx-a:hover{ color:var(--dcx-accent); }

.dcx-code{
  padding:2px 6px;
  border-radius:5px;
  background:var(--dcx-code-bg);
  color:var(--dcx-code-ink);
  font-family:var(--dcx-mono);
  font-size:.88em;
  line-height:1.4;
}

/* ---- code block ---- */
.dcx-pre-wrap{
  position:relative;
  max-width:var(--dcx-article-w);
  margin:0 0 24px;
}
.dcx-pre{
  margin:0;
  padding:20px 22px;
  overflow-x:auto;
  border:1px solid var(--dcx-line);
  border-radius:12px;
  background:var(--dcx-pre-bg);
  scrollbar-width:thin;
}
.dcx-pre-code{
  display:block;
  font-family:var(--dcx-mono);
  font-size:14px;
  line-height:1.75;
  color:var(--dcx-ink);
  white-space:pre;
  tab-size:2;
}
.dcx-copy{
  position:absolute;
  top:10px;
  right:10px;
  padding:6px 12px;
  border:1px solid var(--dcx-line);
  border-radius:8px;
  background:var(--dcx-page);
  color:var(--dcx-muted);
  font-family:inherit;
  font-size:12.5px;
  font-weight:500;
  line-height:1.3;
  cursor:pointer;
  opacity:0;
  transition:opacity .16s ease, color .16s ease, border-color .16s ease;
}
.dcx-pre-wrap:hover .dcx-copy,
.dcx-copy:focus-visible{ opacity:1; }
.dcx-copy:hover{ color:var(--dcx-ink); border-color:#cdd2d8; }
.dcx-copy[data-dcx-done]{ color:var(--dcx-accent); border-color:var(--dcx-note-line); opacity:1; }

/* ---- callouts ---- */
.dcx-note{
  display:grid;
  grid-template-columns:20px minmax(0, 1fr);
  gap:14px;
  max-width:var(--dcx-article-w);
  margin:0 0 24px;
  padding:18px 20px;
  border:1px solid var(--dcx-note-line);
  border-radius:12px;
  background:var(--dcx-note-bg);
}
.dcx-note-ico{
  margin-top:4px;
  color:var(--dcx-accent);
}
.dcx-note-body .dcx-p{ font-size:16px; line-height:1.65; }

.dcx-note-warn{
  border-color:var(--dcx-warn-line);
  background:var(--dcx-warn-bg);
}
.dcx-note-warn .dcx-note-ico{ color:var(--dcx-warn-ink); }

/* ---- pager ---- */
.dcx-pager{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  max-width:var(--dcx-article-w);
  margin-top:clamp(48px, 6vw, 80px);
  padding-top:32px;
  border-top:1px solid var(--dcx-line);
}
.dcx-pager-item{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 20px;
  border:1px solid var(--dcx-line);
  border-radius:12px;
  text-decoration:none;
  transition:border-color .16s ease, background-color .16s ease;
}
.dcx-pager-item:hover{ border-color:#cdd2d8; background:#fafbfc; }
.dcx-pager-next{ text-align:right; }
.dcx-pager-dir{ font-size:13px; color:var(--dcx-muted); }
.dcx-pager-title{ font-size:16px; font-weight:500; color:var(--dcx-ink); }


/* ==========================================================================
   ON THIS PAGE
   ========================================================================== */

.dcx-toc{
  position:sticky;
  top:var(--dcx-header-h);
  max-height:calc(100vh - var(--dcx-header-h));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:36px 24px 64px 4px;
  scrollbar-width:thin;
}

.dcx-toc-head{
  margin:0 0 14px 16px;
  font-size:15.5px;
  font-weight:400;
  line-height:1.4;
  color:var(--dcx-ink);
}

.dcx-toc-list{
  margin:0;
  padding:0;
  list-style:none;
  border-left:1px solid var(--dcx-line);
}

.dcx-toc-link{
  display:block;
  position:relative;
  padding:7px 12px 7px 16px;
  color:var(--dcx-muted);
  font-size:14.5px;
  font-weight:400;
  line-height:1.45;
  text-decoration:none;
  transition:color .14s ease;
}
.dcx-toc-link::before{
  content:"";
  position:absolute;
  left:-1px;
  top:5px;
  bottom:5px;
  width:2px;
  background:transparent;
  transition:background-color .14s ease;
}
.dcx-toc-link:hover{ color:var(--dcx-ink); }
.dcx-toc-on{ color:var(--dcx-ink); font-weight:500; }
.dcx-toc-on::before{ background:var(--dcx-ink); }
.dcx-toc-link:focus-visible{
  outline:2px solid var(--dcx-accent);
  outline-offset:-2px;
  border-radius:4px;
}


/* ==========================================================================
   MOBILE BAR + SCRIM
   ========================================================================== */

.dcx-mobar{
  display:none;
  align-items:center;
  gap:14px;
  padding:12px var(--dcx-gutter);
  border-bottom:1px solid var(--dcx-line);
}
.dcx-mobar-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 15px;
  border:1px solid var(--dcx-line);
  border-radius:99px;
  background:var(--dcx-page);
  color:var(--dcx-ink);
  font-family:inherit;
  font-size:14.5px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
}
.dcx-mobar-btn:hover{ background:var(--dcx-line-soft); }
.dcx-mobar-here{
  min-width:0;
  overflow:hidden;
  color:var(--dcx-muted);
  font-size:14.5px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.dcx-scrim{
  position:fixed;
  inset:0;
  z-index:78;
  background:rgba(15,18,22,.42);
  opacity:0;
  transition:opacity .2s ease;
}
.dcx-scrim[hidden]{ display:none; }
.dcx-scrim-on{ opacity:1; }


/* --------------------------------------------------------------------------
   OPTIONAL — cap the reading column on ultra-wide displays.
   Without this, the article stays hard-left and the gap to the TOC grows on
   very wide monitors. Uncomment if that bothers you visually.
   --------------------------------------------------------------------------
@media (min-width:1800px){
  .dcx-main{ display:flex; flex-direction:column; align-items:center; }
  .dcx-crumb,
  .dcx-article,
  .dcx-pager{ width:100%; max-width:var(--dcx-article-w); }
}
-------------------------------------------------------------------------- */


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:1240px){
  .dcx-docs{ --dcx-side-w:270px; }
  .dcx-layout{ grid-template-columns:var(--dcx-side-w) minmax(0, 1fr); }
  .dcx-toc{ display:none; }
}

@media (max-width:900px){
  .dcx-mobar{ display:flex; }

  .dcx-layout{ grid-template-columns:minmax(0, 1fr); }

  .dcx-side{
    position:fixed;
    top:0;
    left:0;
    z-index:80;
    width:min(88vw, 340px);
    height:100vh;
    padding:24px 12px 64px 0;
    background:var(--dcx-page);
    border-right:1px solid var(--dcx-line);
    box-shadow:0 18px 48px rgba(15,18,22,.16);
    transform:translateX(-102%);
    transition:transform .26s var(--dcx-ease);
    visibility:hidden;
  }
  .dcx-side-open{
    transform:translateX(0);
    visibility:visible;
  }

  .dcx-main{ padding-top:26px; }
  .dcx-article,
  .dcx-pre-wrap,
  .dcx-note,
  .dcx-pager{ max-width:none; }
  .dcx-pager{ grid-template-columns:minmax(0, 1fr); }
}

@media (max-width:520px){
  .dcx-p,
  .dcx-li{ font-size:16px; }
  .dcx-pre{ padding:16px; border-radius:10px; }
  .dcx-copy{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .dcx-side,
  .dcx-scrim,
  .dcx-caret,
  .dcx-copy,
  .dcx-link,
  .dcx-toc-link,
  .dcx-toc-link::before{
    transition:none;
  }
}