/* ===========================================================
   SwanDesk ITSM — documentation styles
   Loaded only by /swandesk/docs/ pages. Reuses the tokens &
   components from style.css (cobalt palette, Open Sans, cards).
   Light theme. Deploys to /swandesk/docs.css on the VPS.
   =========================================================== */

/* ---------- Docs hero / intro ---------- */
.docs-hero{
  padding:clamp(2.2rem,5vw,3.4rem) 0 1.4rem;
  background:
    radial-gradient(1000px 320px at 78% -20%, rgba(0,120,212,.10), transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--bg-alt) 100%);
  border-bottom:1px solid var(--line);
}
.docs-hero .eyebrow{color:var(--cobalt);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.8rem;margin-bottom:.6rem}
.docs-hero h1{font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:.4rem}
.docs-hero p{color:var(--muted);font-size:1.12rem;max-width:62ch;margin:0}

/* ---------- Breadcrumb ---------- */
.docs-breadcrumb{padding:.9rem 0 0}
.docs-breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:.45em;margin:0;padding:0;font-size:.82rem;color:var(--muted)}
.docs-breadcrumb li{display:flex;align-items:center;gap:.45em}
.docs-breadcrumb li+li::before{content:"\203A";color:#b9c4d4}
.docs-breadcrumb a{color:var(--muted);font-weight:600}
.docs-breadcrumb a:hover{color:var(--cobalt);text-decoration:none}
.docs-breadcrumb [aria-current]{color:var(--ink);font-weight:700}

/* ---------- Two-column layout ---------- */
.docs-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:48px;
  align-items:start;padding:2.4rem 0 4rem}

/* ---------- Left index ---------- */
.docs-nav{position:sticky;top:84px;align-self:start;font-size:.92rem;
  max-height:calc(100vh - 104px);overflow:auto}
.docs-nav h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:1.5rem 0 .55rem;font-weight:700}
.docs-nav h4:first-child{margin-top:0}
.docs-nav ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.docs-nav a{display:block;padding:.34em 0 .34em 1rem;margin-left:-2px;color:var(--body);
  border-left:2px solid transparent;font-weight:600;line-height:1.35}
.docs-nav a:hover{color:var(--cobalt);text-decoration:none}
.docs-nav a.active{color:var(--cobalt);border-left-color:var(--cobalt)}

/* ---------- Content column ---------- */
.docs-content{max-width:760px;min-width:0}
.docs-section{scroll-margin-top:90px;margin:0 0 3rem}
.docs-section>h2{font-size:1.5rem;margin-bottom:.5rem}
.docs-section h3{font-size:1.06rem;margin:1.7rem 0 .4rem;color:var(--ink)}
.docs-content p{color:var(--body)}
.docs-content>p:first-of-type,.docs-lead{font-size:1.06rem;color:var(--muted)}
.docs-content ul,.docs-content ol{color:var(--body);padding-left:1.3rem;margin:0 0 1rem}
.docs-content li{margin:.32em 0}
.docs-content li::marker{color:var(--cobalt)}

/* Edition pill next to a heading */
.doc-badge{display:inline-block;vertical-align:middle;margin-left:.55em;
  background:rgba(0,80,239,.10);color:var(--cobalt);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:.3em .65em;border-radius:20px}

/* Numbered steps (lighter than the storefront .steps cards) */
ol.doc-steps{counter-reset:ds;list-style:none;padding:0;margin:0 0 1.3rem}
ol.doc-steps>li{position:relative;counter-increment:ds;padding:.05rem 0 0 2.5rem;
  margin:0 0 1rem;color:var(--body)}
ol.doc-steps>li::before{content:counter(ds);position:absolute;left:0;top:-.15em;
  width:1.75rem;height:1.75rem;display:grid;place-items:center;border-radius:50%;
  background:var(--cobalt);color:#fff;font-weight:800;font-size:.85rem}
ol.doc-steps>li strong{color:var(--ink)}

/* Callout */
.callout{background:rgba(0,120,212,.07);border:1px solid rgba(0,120,212,.18);
  border-radius:var(--radius);padding:14px 18px;margin:0 0 1.3rem;font-size:.95rem;color:var(--body)}
.callout strong{color:var(--ink)}
.callout.warn{background:rgba(196,110,0,.08);border-color:rgba(196,110,0,.24)}
.callout p{margin:0}
.callout p+p{margin-top:.5em}

/* Inline code + code blocks */
.docs-content code{background:var(--bg-alt);border:1px solid var(--line);border-radius:6px;
  padding:.08em .4em;font-family:Consolas,"SFMono-Regular",Menlo,monospace;
  font-size:.86em;color:var(--ink)}
pre.code{background:#0f1830;color:#e7edf9;border-radius:var(--radius);padding:16px 18px;
  overflow-x:auto;margin:0 0 1.3rem;font-size:.85rem;line-height:1.65}
pre.code code{background:none;border:0;padding:0;color:inherit;font-size:inherit}
kbd{background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  padding:.05em .45em;font-family:inherit;font-size:.85em;font-weight:700;color:var(--ink)}

/* API endpoint table */
.api-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:0 0 1.3rem}
.api-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px;background:#fff}
.api-table th,.api-table td{text-align:left;padding:9px 13px;border-bottom:1px solid var(--line)}
.api-table thead th{background:var(--ink);color:#fff;font-weight:700}
.api-table tbody tr:last-child td{border-bottom:0}
.api-table td code{background:var(--bg-alt)}
.api-table td:first-child{white-space:nowrap}

/* ===========================================================
   Hub (documentation home) — grouped card index
   =========================================================== */
.doc-group{margin:0 0 2.6rem}
.doc-group>h2{font-size:1.2rem;margin:0 0 .15rem}
.doc-group>.group-sub{color:var(--muted);font-size:.95rem;margin:0 0 1rem;max-width:70ch}
.doc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.doc-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:15px 18px;box-shadow:var(--shadow);color:var(--body);
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
a.doc-card:hover{text-decoration:none;transform:translateY(-2px);border-color:var(--cobalt);
  box-shadow:0 8px 20px rgba(15,24,48,.10)}
.doc-card h3{font-size:1rem;margin:0 0 .28rem;color:var(--ink);
  display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.doc-card p{margin:0;font-size:.9rem;color:var(--muted);line-height:1.5}
.doc-card.soon{opacity:.6;box-shadow:none;cursor:default}
.soon-pill{background:var(--bg-alt);color:var(--muted);font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;padding:.28em .62em;border-radius:20px;
  border:1px solid var(--line)}

/* Hub intro list ("start here") */
.docs-body{padding:2.4rem 0 4rem}

/* ===========================================================
   In-page footer nav: related links + prev/next pager
   =========================================================== */
.doc-related{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 20px;margin:2.2rem 0 0}
.doc-related h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 .5rem;font-weight:700}
.doc-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.3rem}
.doc-related li{margin:0}
.doc-related a{font-weight:600}

.doc-pager{display:flex;gap:14px;margin:2.4rem 0 0;border-top:1px solid var(--line);padding-top:1.5rem}
.doc-pager a{flex:1 1 0;min-width:0;display:block;border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 16px;background:#fff}
.doc-pager a:hover{border-color:var(--cobalt);text-decoration:none;box-shadow:var(--shadow)}
.doc-pager .spacer{flex:1 1 0}
.doc-pager .dir{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);font-weight:700;margin-bottom:.15em}
.doc-pager .ttl{color:var(--ink);font-weight:700;line-height:1.3}
.doc-pager .next{text-align:right}

/* ---------- Screenshot figure ---------- */
.doc-shot{margin:0 0 1.8rem}
.doc-shot img{display:block;width:100%;max-width:100%;height:auto;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 6px 20px rgba(15,24,48,.10)}
.doc-shot figcaption{margin-top:.55rem;font-size:.82rem;color:var(--muted);text-align:center}

/* ---------- Mobile: index collapses to a card at the top ---------- */
@media (max-width:860px){
  .docs-layout{grid-template-columns:1fr;gap:1.6rem;padding-top:1.6rem}
  .docs-nav{position:static;max-height:none;overflow:visible;background:#fff;
    border:1px solid var(--line);border-radius:var(--radius);padding:14px 20px;box-shadow:var(--shadow)}
  .docs-nav h4{margin-top:1rem}
  .docs-nav ul{border-left:0;display:flex;flex-wrap:wrap;gap:.1rem .9rem}
  .docs-nav a{padding:.2em 0;border-left:0}
  .docs-nav a.active{border-left:0;text-decoration:underline}
  .docs-content{max-width:none}
  .doc-pager{flex-direction:column}
  .doc-pager .next{text-align:left}
  .doc-pager .spacer{display:none}
}