html {
   scroll-behavior: smooth;
}

/* Styles scoped to the /guide handbook page. Reuses theme.css tokens
   (colors/spacing/radius/shadow) so this page matches the rest of the
   marketing site instead of inventing its own palette. */

.guide-hero {
   padding: var(--space-8) 0 var(--space-6);
   text-align: center;
}

.guide-hero .tag {
   color: var(--color-primary-light);
   font-weight: 700;
   font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.08em;
}

.guide-hero h1 {
   font-size: var(--font-size-3xl);
   margin: var(--space-2) 0 var(--space-3);
}

.guide-hero p {
   color: var(--color-text-muted);
   max-width: 640px;
   margin: 0 auto;
}

.guide-layout {
   display: grid;
   grid-template-columns: 260px 1fr;
   gap: var(--space-8);
   align-items: start;
}

@media (max-width: 900px) {
   .guide-layout {
      grid-template-columns: 1fr;
   }
}

.guide-toc {
   position: sticky;
   top: var(--space-4);
   background: var(--color-surface);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-4);
   max-height: calc(100vh - var(--space-8));
   overflow-y: auto;
}

@media (max-width: 900px) {
   .guide-toc {
      position: static;
      max-height: none;
   }
}

.guide-toc-title {
   font-size: var(--font-size-xs);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: var(--color-text-dim);
   margin-bottom: var(--space-2);
}

.guide-toc ol {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.guide-toc li a {
   display: block;
   padding: 6px 10px;
   border-radius: var(--radius-sm);
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
   text-decoration: none;
}

.guide-toc li a:hover {
   background: var(--color-surface-alt);
   color: var(--color-text);
}

.guide-toc li a.active {
   background: rgba(108, 99, 255, 0.12);
   color: var(--color-primary-dark);
   font-weight: 700;
}

/* breadcrumb above the two-column layout on a chapter page */
.doc-breadcrumb {
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-5);
}

.doc-breadcrumb a {
   color: var(--color-primary-light);
   text-decoration: none;
   font-weight: 600;
}

.doc-breadcrumb a:hover {
   text-decoration: underline;
}

.doc-breadcrumb-sep {
   margin: 0 6px;
   opacity: 0.6;
}

/* chapter page header (icon + h1), replaces the old inline h2 now that
   each topic is its own page instead of a stacked section */
.doc-header {
   display: flex;
   align-items: center;
   gap: var(--space-3);
   margin-bottom: var(--space-2);
}

.doc-header .icon {
   width: 44px;
   height: 44px;
   border-radius: var(--radius-sm);
   background: var(--color-surface-alt);
   color: var(--color-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.doc-header h1 {
   font-size: var(--font-size-2xl);
   margin: 0;
}

/* prev/next pager at the bottom of a chapter */
.doc-pager {
   display: flex;
   justify-content: space-between;
   gap: var(--space-4);
   margin-top: var(--space-8);
   padding-top: var(--space-6);
   border-top: 1px solid var(--color-border);
}

.doc-pager-link {
   display: flex;
   flex-direction: column;
   gap: 2px;
   text-decoration: none;
   padding: var(--space-3) var(--space-4);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   max-width: 46%;
   background: var(--color-surface);
   transition: border-color var(--transition-fast);
}

.doc-pager-link:hover {
   border-color: var(--color-primary-light);
}

.doc-pager-next {
   text-align: end;
   margin-inline-start: auto;
}

.doc-pager-label {
   font-size: var(--font-size-xs);
   color: var(--color-text-dim);
}

.doc-pager-link strong {
   color: var(--color-text);
   font-size: var(--font-size-sm);
}

/* hub page - grid of chapter cards */
.doc-hub-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--space-5);
}

@media (max-width: 900px) {
   .doc-hub-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 560px) {
   .doc-hub-grid {
      grid-template-columns: 1fr;
   }
}

.doc-card {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
   padding: var(--space-5);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface);
   text-decoration: none;
   color: inherit;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.doc-card:hover {
   transform: translateY(-3px);
   box-shadow: var(--shadow-md);
   border-color: var(--color-primary-light);
}

.doc-card-num {
   font-size: var(--font-size-xs);
   font-weight: 700;
   color: var(--color-text-dim);
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.doc-card-head {
   display: flex;
   align-items: center;
   gap: var(--space-3);
}

.doc-card-head .icon {
   width: 38px;
   height: 38px;
   border-radius: var(--radius-sm);
   background: var(--color-surface-alt);
   color: var(--color-primary);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.doc-card-head h3 {
   margin: 0;
   font-size: var(--font-size-lg);
}

.doc-card p {
   margin: 0;
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
   flex: 1;
}

.doc-card-cta {
   color: var(--color-primary-light);
   font-weight: 700;
   font-size: var(--font-size-sm);
}

/* contextual "book" links dropped into the product itself (builder,
   automation editor, data page) pointing at the relevant chapter */
.guide-hint-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: var(--font-size-sm);
   color: var(--color-primary-light);
   text-decoration: none;
   font-weight: 600;
}

.guide-hint-link:hover {
   text-decoration: underline;
}

.guide-content {
   min-width: 0;
}

.guide-section>p.lead {
   color: var(--color-text-muted);
   font-size: var(--font-size-base);
   max-width: 760px;
   margin: 0 0 var(--space-6);
}

.guide-section h3 {
   font-size: var(--font-size-lg);
   margin: var(--space-6) 0 var(--space-3);
}

.guide-section h4 {
   font-size: var(--font-size-base);
   margin: var(--space-4) 0 var(--space-2);
}

.guide-section p {
   line-height: 1.7;
   color: var(--color-text);
}

.guide-section ul,
.guide-section ol.guide-list {
   line-height: 1.8;
   color: var(--color-text);
   padding-inline-start: 1.4em;
   margin: 0 0 var(--space-3);
}

/* inline code / token pills, e.g. {{now}}, sdb.table[key] */
.pill-code,
code.pill-code {
   font-family: 'Courier New', monospace;
   background: var(--color-surface-alt);
   border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 1px 7px;
   font-size: 0.88em;
   color: var(--color-primary-dark);
   direction: ltr;
   unicode-bidi: embed;
   display: inline-block;
}

pre.code-block {
   font-family: 'Courier New', monospace;
   background: #1c1a2e;
   color: #e7e5ff;
   border-radius: var(--radius-sm);
   padding: var(--space-4);
   overflow-x: auto;
   font-size: 0.86rem;
   line-height: 1.7;
   direction: ltr;
   text-align: left;
   margin: var(--space-3) 0;
}

pre.code-block .cm {
   color: #8b87c9;
}

/* responsive data tables */
.guide-table-wrap {
   overflow-x: auto;
   margin: var(--space-3) 0 var(--space-5);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
}

table.guide-table {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   background: var(--color-surface);
}

table.guide-table th,
table.guide-table td {
   padding: 10px 14px;
   text-align: start;
   border-bottom: 1px solid var(--color-border);
   vertical-align: top;
}

table.guide-table th {
   background: var(--color-surface-alt);
   font-weight: 700;
   white-space: nowrap;
}

table.guide-table tr:last-child td {
   border-bottom: none;
}

table.guide-table td.mono,
table.guide-table th.mono {
   font-family: 'Courier New', monospace;
   direction: ltr;
   text-align: left;
}

/* required / optional / recommended field badges */
.req-badge {
   display: inline-block;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 2px 8px;
   border-radius: var(--radius-full);
   white-space: nowrap;
}

.req-badge.req {
   background: rgba(179, 65, 81, 0.12);
   color: var(--color-danger);
}

.req-badge.opt {
   background: rgba(91, 88, 120, 0.10);
   color: var(--color-text-muted);
}

.req-badge.rec {
   background: rgba(28, 122, 68, 0.12);
   color: var(--color-success);
}

/* node-kind badges used throughout the automation section */
.kind-badge {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 0.72rem;
   font-weight: 700;
   padding: 3px 10px;
   border-radius: var(--radius-full);
}

.kind-badge.kind-event {
   background: rgba(108, 99, 255, 0.14);
   color: var(--color-primary-dark);
}

.kind-badge.kind-condition {
   background: rgba(184, 131, 10, 0.14);
   color: var(--color-warning);
}

.kind-badge.kind-action {
   background: rgba(43, 132, 224, 0.14);
   color: var(--color-accent-dark);
}

.kind-badge.kind-fun {
   background: rgba(28, 122, 68, 0.14);
   color: var(--color-success);
}

/* callout boxes */
.callout {
   border-radius: var(--radius-md);
   padding: var(--space-4) var(--space-5);
   margin: var(--space-4) 0;
   border: 1px solid var(--color-border);
   background: var(--color-surface-alt);
}

.callout-head {
   display: flex;
   align-items: center;
   gap: 8px;
   font-weight: 700;
   margin-bottom: 4px;
}

.callout p {
   margin: 0;
   font-size: var(--font-size-sm);
   color: var(--color-text-muted);
}

.callout-required {
   background: rgba(179, 65, 81, 0.08);
   border-color: rgba(179, 65, 81, 0.25);
}

.callout-required .callout-head {
   color: var(--color-danger);
}

.callout-recommended {
   background: rgba(28, 122, 68, 0.08);
   border-color: rgba(28, 122, 68, 0.25);
}

.callout-recommended .callout-head {
   color: var(--color-success);
}

.callout-tip {
   background: rgba(108, 99, 255, 0.08);
   border-color: rgba(108, 99, 255, 0.25);
}

.callout-tip .callout-head {
   color: var(--color-primary-dark);
}

.callout-warning {
   background: rgba(184, 131, 10, 0.08);
   border-color: rgba(184, 131, 10, 0.25);
}

.callout-warning .callout-head {
   color: var(--color-warning);
}

/* element / node grid cards */
.mini-card {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   padding: var(--space-3) var(--space-4);
   background: var(--color-surface);
}

.mini-card .mini-card-title {
   font-weight: 700;
   font-size: var(--font-size-sm);
   display: flex;
   align-items: center;
   gap: 6px;
}

.mini-card .mini-card-desc {
   font-size: 0.82rem;
   color: var(--color-text-muted);
   margin-top: 3px;
}

.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 720px) {

   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr 1fr;
   }
}

@media (max-width: 480px) {

   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr;
   }
}

/* ---------------- flow / wiring diagrams ---------------- */
.flow-example {
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   background: var(--color-surface);
   padding: var(--space-6);
   margin: var(--space-4) 0 var(--space-6);
}

.flow-example-title {
   font-weight: 700;
   margin-bottom: 2px;
}

.flow-example-desc {
   color: var(--color-text-muted);
   font-size: var(--font-size-sm);
   margin-bottom: var(--space-5);
}

.flow {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.flow-node {
   width: 100%;
   max-width: 360px;
   border: 1px solid var(--color-border);
   border-inline-start: 5px solid var(--color-primary);
   border-radius: var(--radius-sm);
   background: var(--color-surface);
   box-shadow: var(--shadow-sm);
   padding: var(--space-3) var(--space-4);
}

.flow-node.node-condition {
   border-inline-start-color: var(--color-warning);
}

.flow-node.node-action {
   border-inline-start-color: var(--color-accent);
}

.flow-node.node-fun {
   border-inline-start-color: var(--color-success);
}

.flow-node-kind {
   font-size: 0.68rem;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text-dim);
}

.flow-node-title {
   font-weight: 700;
   margin-top: 2px;
}

.flow-node-config {
   font-family: 'Courier New', monospace;
   direction: ltr;
   text-align: left;
   font-size: 0.78rem;
   color: var(--color-text-muted);
   margin-top: 6px;
   line-height: 1.6;
}

.flow-arrow {
   width: 2px;
   height: 28px;
   background: var(--color-border);
   position: relative;
}

.flow-arrow::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 50%;
   transform: translateX(-50%);
   border-inline-start: 6px solid transparent;
   border-inline-end: 6px solid transparent;
   border-top: 8px solid var(--color-border);
}

.flow-arrow.labeled {
   height: 40px;
}

.flow-arrow-label {
   font-size: 0.72rem;
   font-weight: 700;
   padding: 2px 9px;
   border-radius: var(--radius-full);
   background: var(--color-surface-alt);
   border: 1px solid var(--color-border);
   position: relative;
   top: 14px;
   z-index: 1;
}

.flow-arrow-label.yes {
   color: var(--color-success);
}

.flow-arrow-label.no {
   color: var(--color-danger);
}

.flow-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-6);
   width: 100%;
   margin-top: 0;
}

@media (max-width: 640px) {
   .flow-split {
      grid-template-columns: 1fr;
   }
}

.flow-branch {
   display: flex;
   flex-direction: column;
   align-items: center;
}

.flow-branch>.flow-arrow:first-child {
   height: 20px;
}

.guide-cta {
   text-align: center;
   padding: var(--space-8) 0;
}