/* ============================================================
   PalmKash Docs — Petrol & Bone shared theme
   Used by the /docs hub (layout.blade.php, index, dashboard).
   ============================================================ */
:root {
  --paper:#f1f1ea; --paper-2:#e9eae1; --surface:#fbfbf7; --surface-2:#eef0e8;
  --ink:#14160f; --ink-soft:#414a3f; --muted:#79806f; --faint:#9aa08d;
  --line:#dcded1; --line-2:#cbcebd;
  --accent:#0c6b6f; --accent-2:#0f8f94; --accent-ink:#085255; --accent-wash:#e2eeed;
  --good:#1a7f47; --good-wash:#e2efe6; --bad:#b93d2c; --warn:#9c6b06;
  --code-bg:#14170f; --code-surface:#191d13; --code-ink:#e7e9dc;
  --shadow-sm:0 1px 2px rgba(20,22,15,.05);
  --shadow:0 2px 4px rgba(20,22,15,.04),0 14px 34px -18px rgba(20,22,15,.22);
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular","SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --maxw:1200px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#0b0e0a; --paper-2:#0f130d; --surface:#12160f; --surface-2:#191e15;
  --ink:#ecefe0; --ink-soft:#c2c8b6; --muted:#868d78; --faint:#626858;
  --line:#262c1e; --line-2:#343b28;
  --accent:#2bbfc4; --accent-2:#46d6da; --accent-ink:#7fe3e6; --accent-wash:#0f2a2b;
  --good:#46c07e; --good-wash:#12291b; --bad:#e8715f; --warn:#d59f3f;
  --code-bg:#080a06; --code-surface:#0e120a; --code-ink:#e4e7d8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 4px rgba(0,0,0,.3),0 18px 40px -20px rgba(0,0,0,.75);
}}
:root[data-theme="dark"]{
  --paper:#0b0e0a; --paper-2:#0f130d; --surface:#12160f; --surface-2:#191e15;
  --ink:#ecefe0; --ink-soft:#c2c8b6; --muted:#868d78; --faint:#626858;
  --line:#262c1e; --line-2:#343b28;
  --accent:#2bbfc4; --accent-2:#46d6da; --accent-ink:#7fe3e6; --accent-wash:#0f2a2b;
  --good:#46c07e; --good-wash:#12291b; --bad:#e8715f; --warn:#d59f3f;
  --code-bg:#080a06; --code-surface:#0e120a; --code-ink:#e4e7d8;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 4px rgba(0,0,0,.3),0 18px 40px -20px rgba(0,0,0,.75);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:120px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; }
a { color:var(--accent-ink); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
::selection { background:var(--accent); color:#fff; }
:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; border-radius:4px; }
.mono { font-family:var(--mono); }

/* ===== TOP BAR + TABS ===== */
.doc-top { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--paper) 85%, transparent); backdrop-filter:saturate(1.5) blur(12px); border-bottom:1px solid var(--line); }
.doc-top-inner { max-width:var(--maxw); margin:0 auto; padding:11px 26px; display:flex; align-items:center; gap:16px; }
.doc-brand { display:flex; align-items:center; gap:10px; font-weight:650; letter-spacing:-.02em; font-size:16px; color:var(--ink); }
.doc-brand .mark { width:28px; height:28px; border-radius:8px; background:var(--surface); border:1px solid var(--line-2); display:grid; place-items:center; flex:none; }
.doc-brand .mark svg { width:18px; height:20px; }
.doc-brand .ver { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); padding:2px 7px; border-radius:5px; }
.doc-spacer { flex:1; }
.doc-top .theme-btn { flex:none; width:34px; height:34px; border-radius:8px; cursor:pointer; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); display:grid; place-items:center; padding:0; transition:border-color .2s, transform .2s; }
.doc-top .theme-btn:hover { border-color:var(--accent); transform:rotate(-15deg); }
.doc-top .theme-btn svg { width:15px; height:15px; }

.doc-tabs { max-width:var(--maxw); margin:0 auto; padding:0 26px; display:flex; gap:4px; }
.doc-tabs a { position:relative; padding:12px 4px; margin-right:22px; font-size:14.5px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; transition:color .15s; }
.doc-tabs a:hover { color:var(--ink); text-decoration:none; }
.doc-tabs a.active { color:var(--ink); font-weight:650; border-bottom-color:var(--accent); }

/* ===== SHELL ===== */
.doc-shell { max-width:var(--maxw); margin:0 auto; padding:0 26px; display:grid; grid-template-columns:224px 1fr; gap:44px; }
.doc-shell.with-toc { grid-template-columns:224px 1fr 200px; }
.doc-side { position:sticky; top:112px; align-self:start; height:calc(100vh - 124px); overflow-y:auto; padding:34px 0; font-size:14px; scrollbar-width:thin; }
.doc-side .grp { font-family:var(--mono); text-transform:uppercase; letter-spacing:.14em; font-size:10px; color:var(--faint); font-weight:600; margin:24px 0 8px; padding-left:12px; }
.doc-side .grp:first-child { margin-top:0; }
.doc-side a { display:block; color:var(--ink-soft); padding:6px 12px; border-radius:8px; border-left:2px solid transparent; }
.doc-side a:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; }
.doc-side a.active { color:var(--accent-ink); background:var(--accent-wash); border-left-color:var(--accent); font-weight:600; }
.doc-main { padding:40px 0 100px; min-width:0; }
.doc-toc { position:sticky; top:112px; align-self:start; padding:40px 0; font-size:13px; }
.doc-toc .lbl { display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:12px; }
.doc-toc a { display:block; color:var(--muted); padding:4px 0; }
.doc-toc a:hover { color:var(--accent-ink); text-decoration:none; }
@media (max-width:1040px){ .doc-shell.with-toc { grid-template-columns:224px 1fr; } .doc-toc { display:none; } }
@media (max-width:900px){
  .doc-shell, .doc-shell.with-toc { grid-template-columns:1fr; }
  .doc-side { position:static; height:auto; border-bottom:1px solid var(--line); padding:16px 0; display:flex; flex-wrap:wrap; gap:2px; }
  .doc-side .grp { width:100%; margin:10px 0 4px; }
  .doc-tabs a { margin-right:16px; }
}

/* ===== CONTENT ===== */
.doc-eyebrow { font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-ink); font-weight:600; }
.doc-main h1 { font-size:clamp(30px,4vw,44px); letter-spacing:-.035em; line-height:1.02; font-weight:800; margin:14px 0 0; text-wrap:balance; }
.doc-main h2 { font-size:clamp(21px,2.6vw,27px); letter-spacing:-.025em; font-weight:750; margin:52px 0 4px; scroll-margin-top:120px; padding-top:8px; }
.doc-main h3 { font-size:16px; font-weight:650; margin:28px 0 8px; }
.doc-lede { font-size:19px; color:var(--ink-soft); margin:18px 0 0; max-width:64ch; }
.doc-main p { max-width:70ch; }
.doc-main p, .doc-main li { color:var(--ink-soft); }
.doc-main strong { color:var(--ink); }
.doc-main code { font-family:var(--mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--line); padding:1px 5px; border-radius:5px; color:var(--accent-ink); }
.doc-main ul { padding-left:20px; }
.doc-main li { margin:6px 0; }
.rule { border:none; border-top:1px solid var(--line); margin:44px 0; }

/* Cards grid */
.doc-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin:24px 0; }
.doc-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:20px; box-shadow:var(--shadow-sm); transition:transform .2s, border-color .2s, box-shadow .2s; color:inherit; }
.doc-card:hover { transform:translateY(-3px); border-color:var(--line-2); box-shadow:var(--shadow); text-decoration:none; }
.doc-card .ico { width:38px; height:38px; border-radius:10px; background:var(--accent-wash); color:var(--accent-ink); display:grid; place-items:center; margin-bottom:13px; }
.doc-card .ico svg { width:20px; height:20px; }
.doc-card h4 { margin:0 0 6px; font-size:16px; font-weight:650; letter-spacing:-.01em; color:var(--ink); }
.doc-card p { margin:0; font-size:14px; color:var(--muted); }
.doc-card .go { margin-top:12px; font-family:var(--mono); font-size:12px; color:var(--accent-ink); }

/* Note callout */
.doc-note { display:flex; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:10px; padding:14px 16px; margin:20px 0; font-size:14.5px; color:var(--ink-soft); }
.doc-note.warn { border-left-color:var(--warn); }
.doc-note .ic { flex:none; font-family:var(--mono); font-weight:700; color:var(--accent); }
.doc-note.warn .ic { color:var(--warn); }
.doc-note strong { color:var(--ink); }

/* Steps */
.doc-steps { counter-reset:st; display:grid; gap:0; margin:20px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.doc-steps .s { display:flex; gap:15px; align-items:flex-start; padding:16px 18px; background:var(--surface); border-bottom:1px solid var(--line); }
.doc-steps .s:last-child { border-bottom:none; }
.doc-steps .s::before { counter-increment:st; content:counter(st,decimal-leading-zero); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--accent); flex:none; padding-top:2px; }
.doc-steps .s div { font-size:14.5px; }
.doc-steps .s strong { color:var(--ink); }

/* Table */
.doc-tbl { overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:11px; }
.doc-tbl table { border-collapse:collapse; width:100%; font-size:14px; min-width:420px; }
.doc-tbl th, .doc-tbl td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.doc-tbl thead th { background:var(--surface-2); font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:600; }
.doc-tbl tbody tr:last-child td { border-bottom:none; }

/* Code */
.doc-code { margin:18px 0; border-radius:12px; overflow:hidden; border:1px solid color-mix(in srgb,var(--code-bg) 55%,#000); background:var(--code-surface); }
.doc-code .bar { display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--code-bg); border-bottom:1px solid rgba(255,255,255,.07); }
.doc-code .bar span { font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:#9aa38c; }
.doc-code pre { margin:0; color:var(--code-ink); padding:15px 16px; overflow-x:auto; font-family:var(--mono); font-size:12.8px; line-height:1.65; white-space:pre; }

/* Screenshot figure */
.doc-shot { margin:22px 0; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow); background:var(--surface); }
.doc-shot > .bar { display:flex; align-items:center; gap:6px; padding:9px 13px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.doc-shot > .bar i { width:9px; height:9px; border-radius:50%; background:var(--line-2); display:block; }
.doc-shot > .bar span { margin-left:8px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.doc-shot img { display:block; width:100%; height:auto; }
.doc-shot .shot-missing { padding:30px 18px; text-align:center; color:var(--muted); font-size:13px; font-family:var(--mono); line-height:1.7; background:var(--surface-2); }
.doc-shot .shot-missing code { color:var(--accent-ink); background:var(--surface); border:1px solid var(--line); padding:1px 6px; border-radius:5px; }
.doc-shot figcaption { padding:10px 14px; font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); }

/* Footer */
.doc-foot { border-top:1px solid var(--line); }
.doc-foot-inner { max-width:var(--maxw); margin:0 auto; padding:30px 26px 40px; color:var(--muted); font-family:var(--mono); font-size:12px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }