/* ============================================================
   Stockpile Reports AI -- connect / onboarding page
   Loads AFTER css/styles.css, so it reuses the brand custom
   properties (--sr-yellow etc.), .container, .hero*, and .footer*
   defined there. This file adds only the onboarding-specific
   components (prerequisites, the connection-address callout, the
   assistant chooser, step lists, code blocks, examples, FAQ).
   ============================================================ */

/* ============================================================
   HERO (reuses .hero / .hero-eyebrow / .hero-headline / .hero-sub
   from styles.css; tweaked spacing + a logo + a second button)
   ============================================================ */
.hero--connect {
 padding: 88px 0 60px;
}

.hero-actions {
 display: flex;
 gap: 14px;
 justify-content: center;
 flex-wrap: wrap;
}

.hero-cta--ghost {
 background: transparent;
 color: var(--sr-white);
 border: 1px solid rgba(255, 255, 255, 0.4);
}

.hero-cta--ghost:hover {
 border-color: var(--sr-yellow);
 color: var(--sr-yellow);
}

/* ============================================================
   GENERIC SECTION
   ============================================================ */
.section {
 padding: 80px 0;
}

.section--soft {
 background: var(--sr-bg-soft);
 border-top: 1px solid var(--sr-border);
 border-bottom: 1px solid var(--sr-border);
}

.section .container {
 max-width: 820px;
}

.section-heading--left {
 text-align: left;
}

.section-sub--left {
 text-align: left;
 margin-left: 0;
 margin-right: 0;
 max-width: none;
}

/* ============================================================
   CONNECTION-ADDRESS CALLOUT
   The one value customers paste over and over.
   ============================================================ */
.url-callout {
 background: var(--sr-black);
 border-radius: 8px;
 padding: 24px 28px;
 margin: 32px auto 0;
 max-width: 720px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 flex-wrap: wrap;
}

.url-callout-label {
 font-size: 0.6875rem;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--sr-yellow);
 margin: 0 0 6px;
}

.url-callout-value {
 font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 font-size: 1.0625rem;
 color: var(--sr-white);
 word-break: break-all;
}

/* ============================================================
   COPY BUTTON (used in the URL callout and on code blocks)
   ============================================================ */
.copy-btn {
 background: var(--sr-yellow);
 color: var(--sr-black);
 border: none;
 border-radius: 4px;
 font-family: inherit;
 font-size: 0.8125rem;
 font-weight: 700;
 padding: 8px 16px;
 cursor: pointer;
 white-space: nowrap;
 transition: transform 0.15s ease;
}

.copy-btn:hover {
 transform: translateY(-1px);
}

/* ============================================================
   PREREQUISITES
   ============================================================ */
.prereqs {
 list-style: none;
 padding: 0;
 margin: 8px 0 0;
 display: flex;
 flex-direction: column;
 gap: 18px;
}

.prereqs li {
 display: flex;
 gap: 14px;
 align-items: baseline;
 font-size: 1.0625rem;
 line-height: 1.55;
 color: var(--sr-body);
}

.prereqs strong {
 color: var(--sr-black);
}

.prereq-check {
 color: var(--sr-yellow);
 font-weight: 700;
 font-size: 1.25rem;
 flex-shrink: 0;
 width: 1em;
 text-align: center;
 line-height: 1.2;
}

/* ============================================================
   ASSISTANT CHOOSER
   ============================================================ */
.assistant-grid {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 16px;
 margin-top: 8px;
}

.assistant-card {
 flex: 1 1 200px;
 max-width: 240px;
 border: 1px solid var(--sr-border);
 border-radius: 8px;
 padding: 20px 22px;
 text-decoration: none;
 color: var(--sr-black);
 display: flex;
 flex-direction: column;
 gap: 4px;
 background: var(--sr-white);
 transition: transform 0.15s ease, border-color 0.15s ease;
}

.assistant-card:hover {
 border-color: var(--sr-yellow);
 transform: translateY(-2px);
 text-decoration: none;
}

.assistant-card-name {
 font-weight: 700;
 font-size: 1.0625rem;
}

.assistant-card-note {
 font-size: 0.875rem;
 color: var(--sr-muted);
}

/* Subtle helper line under the chooser for assistants not pictured. */
.assistant-note {
 text-align: center;
 max-width: 620px;
 margin: 22px auto 0;
 font-size: 0.9375rem;
 line-height: 1.6;
 color: var(--sr-muted);
}

/* ============================================================
   PER-ASSISTANT GUIDE BLOCKS
   ============================================================ */
.guide {
 padding-top: 44px;
 margin-top: 44px;
 border-top: 1px solid var(--sr-border);
}

.guide:first-of-type {
 border-top: none;
 padding-top: 8px;
 margin-top: 0;
}

.guide-eyebrow {
 font-size: 0.6875rem;
 font-weight: 700;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 color: var(--sr-yellow);
 margin: 0 0 8px;
}

.guide-title {
 font-size: 1.5rem;
 font-weight: 700;
 letter-spacing: -0.01em;
 color: var(--sr-black);
 margin: 0 0 8px;
}

.guide-intro {
 font-size: 1rem;
 line-height: 1.6;
 color: var(--sr-body);
 margin: 0 0 24px;
}

/* A closing note directly beneath a steps list. ol.steps has no bottom margin and
   .guide-intro no top margin, so without this the note crowds the final step. */
.guide-intro--after-steps {
 margin-top: 14px;
}

/* Sub-heading within a guide, for setup that splits into parts (see Copilot Studio). */
.guide-subtitle {
 font-size: 1.125rem;
 font-weight: 700;
 letter-spacing: -0.01em;
 color: var(--sr-black);
 margin: 28px 0 12px;
}

/* Sub-heading within a guide part, e.g. the two halves of the Copilot Part 3.
   Carries an id so an admin can link a colleague straight to their steps. */
.guide-substep {
 font-size: 1rem;
 font-weight: 700;
 letter-spacing: -0.01em;
 color: var(--sr-black);
 margin: 24px 0 10px;
}

/* Hover permalink beside a guide heading that carries an id. Hidden until the
   heading is hovered, or the link itself is focused by keyboard. Always visible
   on touch devices, which have no hover state to reveal it. */
.guide-title,
.guide-subtitle,
.guide-substep {
 scroll-margin-top: 24px;
}

.heading-anchor {
 margin-left: 8px;
 font-weight: 400;
 color: var(--sr-muted);
 text-decoration: none;
 opacity: 0;
 transition: opacity 120ms ease-in-out;
}

.guide-title:hover .heading-anchor,
.guide-subtitle:hover .heading-anchor,
.guide-substep:hover .heading-anchor,
.heading-anchor:focus {
 opacity: 1;
}

.heading-anchor:hover,
.heading-anchor:focus {
 color: var(--sr-black);
 text-decoration: none;
}

@media (hover: none) {
 .heading-anchor { opacity: 1; }
}

/* Official-docs reference link under each guide's steps/notes. */
.guide-ref {
 font-size: 0.875rem;
 line-height: 1.6;
 color: var(--sr-muted);
 margin: 18px 0 0;
}

/* ============================================================
   STEP LISTS
   ============================================================ */
ol.steps {
 margin: 0;
 padding: 0;
 list-style: none;
 counter-reset: step;
}

ol.steps > li {
 counter-increment: step;
 position: relative;
 padding: 0 0 22px 48px;
 font-size: 1.0625rem;
 line-height: 1.6;
 color: var(--sr-body);
}

ol.steps > li::before {
 content: counter(step);
 position: absolute;
 left: 0;
 top: -2px;
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: var(--sr-black);
 color: var(--sr-white);
 font-size: 0.9375rem;
 font-weight: 700;
 display: flex;
 align-items: center;
 justify-content: center;
}

ol.steps > li:last-child {
 padding-bottom: 0;
}

/* A note that OPENS a guide, before the steps rather than after them (see Claude Code,
   where it tells the reader they may not need the steps at all). .note has only 4px of
   bottom margin and ol.steps has none, while the step number sits at top: -2px -- so
   without this the callout very nearly touches the first step's circle.
   The two margins COLLAPSE rather than add, so the gap is this value and not this value
   plus the note's 4px: 24px collapsed, less the 2px the circle is raised by, gives the
   22px used between steps. Measured, after a first attempt at 20px assumed they added
   and landed at 18px. */
.note + ol.steps {
 margin-top: 24px;
}

ol.steps strong {
 color: var(--sr-black);
}

/* a thin vertical connector between step numbers */
ol.steps > li:not(:last-child)::after {
 content: '';
 position: absolute;
 left: 14px;
 top: 30px;
 bottom: 4px;
 width: 1px;
 background: var(--sr-border);
}

/* ============================================================
   CODE BLOCKS
   ============================================================ */
.code {
 position: relative;
 background: var(--sr-black);
 border-radius: 6px;
 /* extra top padding leaves a "toolbar" band so the Copy button never
    overlaps the command text, even when a long command scrolls. */
 padding: 40px 18px 16px;
 margin: 12px 0 4px;
 overflow-x: auto;
}

.code code {
 font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 font-size: 0.875rem;
 line-height: 1.6;
 color: var(--sr-white);
 white-space: pre;
}

.code .copy-btn {
 position: absolute;
 top: 10px;
 right: 10px;
 padding: 5px 12px;
 font-size: 0.75rem;
}

/* ============================================================
   NOTE / CALLOUT
   ============================================================ */
.note {
 background: #FFF6DC;
 border-left: 3px solid var(--sr-yellow);
 border-radius: 0 6px 6px 0;
 padding: 14px 18px;
 margin: 18px 0 4px;
 font-size: 0.95rem;
 line-height: 1.6;
 color: var(--sr-body);
}

.note strong {
 color: var(--sr-black);
}

/* A dialog's fields, laid out the way the dialog presents them: label, the value
   to enter, and a copy button. Rows the reader SELECTS rather than types carry no
   button -- the presence of a button is itself the signal that something is
   pasteable. Wraps to stacked label/value on narrow screens. */
.field-list {
 list-style: none;
 padding: 0;
 margin: 12px 0 4px;
 border: 1px solid var(--sr-border);
 border-radius: 6px;
 background: var(--sr-white);
}

.field-list > li {
 display: flex;
 align-items: flex-start;
 gap: 12px;
 padding: 12px 14px;
 border-top: 1px solid var(--sr-border);
 flex-wrap: wrap;
}

.field-list > li:first-child {
 border-top: none;
}

.field-label {
 flex: 0 0 148px;
 font-size: 0.9375rem;
 font-weight: 700;
 color: var(--sr-black);
 line-height: 1.5;
}

.field-value {
 flex: 1 1 240px;
 min-width: 0;
 font-size: 0.95rem;
 line-height: 1.5;
 color: var(--sr-body);
 overflow-wrap: anywhere;
}

.field-value--mono {
 font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 font-size: 0.9rem;
}

/* Why the field is there, or what the form does with it. Never an instruction. */
.field-note {
 display: block;
 margin-top: 4px;
 font-size: 0.875rem;
 color: var(--sr-muted);
}

.field-list .copy-btn {
 flex-shrink: 0;
}

/* ============================================================
   EXAMPLE PROMPTS
   ============================================================ */
.example-list {
 list-style: none;
 padding: 0;
 margin: 8px 0 0;
 display: flex;
 flex-direction: column;
 gap: 14px;
}

.example-list li {
 display: flex;
 gap: 14px;
 align-items: baseline;
 background: var(--sr-white);
 border: 1px solid var(--sr-border);
 border-radius: 8px;
 padding: 16px 20px;
 font-size: 1.0625rem;
 line-height: 1.55;
 color: var(--sr-body);
}

.example-list .ask-marker {
 color: var(--sr-yellow);
 font-weight: 700;
 flex-shrink: 0;
}

/* ============================================================
   SCOPE / WHAT IT CAN SEE
   ============================================================ */
.scope-list {
 list-style: none;
 padding: 0;
 margin: 8px 0 0;
 display: grid;
 gap: 16px;
}

.scope-list li {
 padding: 18px 20px;
 border: 1px solid var(--sr-border);
 border-radius: 8px;
 background: var(--sr-white);
 font-size: 1rem;
 line-height: 1.6;
 color: var(--sr-body);
}

.scope-list strong {
 display: block;
 color: var(--sr-black);
 margin-bottom: 4px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-item {
 border-top: 1px solid var(--sr-border);
 padding: 22px 0;
}

.faq-item:last-child {
 border-bottom: 1px solid var(--sr-border);
}

.faq-item h3 {
 font-size: 1.125rem;
 font-weight: 700;
 color: var(--sr-black);
 margin: 0 0 8px;
}

.faq-item p {
 margin: 0;
 font-size: 1rem;
 line-height: 1.6;
 color: var(--sr-body);
}

/* ============================================================
   INLINE CODE
   ============================================================ */
code.inline {
 font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
 font-size: 0.9em;
 background: var(--sr-border);
 color: var(--sr-body);
 padding: 1px 6px;
 border-radius: 4px;
 word-break: break-word;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
 .section {
  padding: 56px 0;
 }
 .url-callout {
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
 }
 .url-callout .copy-btn {
  align-self: stretch;
  text-align: center;
 }
 .hero--connect {
  padding: 48px 0 56px;
 }
}