/* cheatsheet.css — shared styles for custom-cheatsheet.hbs and
   custom-cheatsheet-index.hbs. Ported from the hand-built Midjourney page
   (the design Tyler called out as the standard to match), remapped from
   its own hardcoded dark palette onto San Pedro's existing --bg-primary /
   --accent-color / --text-* tokens so it follows the site's Human/Cyber
   toggle instead of forcing its own theme. Loaded only on cheatsheet
   pages, not sitewide. */

.cheatsheet {
    --cs-surface: var(--bg-elevated);
    --cs-surface-hover: color-mix(in srgb, var(--bg-elevated) 88%, var(--text-primary) 12%);
    --cs-border: var(--surface-border);
    /* Separate token — .tab-btn, .search-input, .stats-badge, .table-card,
       .cheatsheet-eyebrow, .tab-nav's divider, and .cheatsheet-pager-btn
       all read this instead of --cs-border directly. A lighter tint of
       THIS page's own --cs-accent (25% lighter — validated as a chatgpt-
       only beta test 2026-08-21 before rolling out here to every
       cheatsheet at once), rather than the neutral --cs-border every one
       of those elements used before this existed — same reasoning as
       --cs-table-header/etc below: a formula off --cs-accent means every
       page picks this up automatically from its own brand color, no
       per-page override needed. */
    --cs-tab-border: color-mix(in srgb, var(--cs-accent) 75%, white 25%);
    --cs-text: var(--text-primary);
    --cs-text-2: var(--text-secondary);
    --cs-text-muted: var(--text-muted);
    --cs-accent: var(--accent-color);
    --cs-accent-2: color-mix(in srgb, var(--accent-color) 55%, var(--text-primary) 45%);
    --cs-code-bg: color-mix(in srgb, var(--bg-primary) 92%, var(--text-primary) 8%);
    --cs-code-border: color-mix(in srgb, var(--accent-color) 25%, transparent);
    --cs-badge-bg: color-mix(in srgb, var(--accent-color) 12%, transparent);
    --cs-badge-text: var(--cs-accent);
    --cs-green: #2f9e5b;
    --cs-amber: #b8790a;
    --cs-rose: #d13f5e;
    --cs-radius: 16px;
    /* Table header/alt-row/hover as a tint of THIS page's own --cs-accent
       (whichever brand rule below set it, or the site default if this
       slug isn't listed) — replaced an earlier version driven by flat,
       sitewide Tyler-editable colors, which looked mismatched on any page
       whose brand accent wasn't close to that one flat color (e.g. a green
       global tint on Claude Code's orange-branded page). Automatic per
       page just from --cs-accent already being set per brand below —
       no per-page override needed. */
    --cs-table-header: color-mix(in srgb, var(--cs-accent) 14%, transparent);
    --cs-table-row-alt: color-mix(in srgb, var(--cs-accent) 6%, transparent);
    --cs-table-hover: color-mix(in srgb, var(--cs-accent) 20%, transparent);
}
:root[data-theme="cyber"] .cheatsheet {
    --cs-green: #4ade80;
    --cs-amber: #fbbf24;
    --cs-rose: #f43f5e;
}

/* Per-page brand accent (§12a "Creating a new cheatsheet" in the README).
   custom-cheatsheet.hbs stamps the page's own slug as data-cheatsheet-brand;
   matching a slug here overrides just --cs-accent/--cs-accent-2 (every other
   --cs-* token, and everything sitewide, is untouched) so each cheatsheet
   reads in that product's own color instead of San Pedro's default accent.
   Colors are best-effort matches to each product's public brand identity,
   not pulled from an official asset kit — nudge a value here if one looks off.
   A page whose slug isn't listed just keeps the site's default --accent-color.

   Bare [data-cheatsheet-brand="X"] attribute selectors (2026-08-21,
   originally .cheatsheet[...]/.components-page-inner[...] compound
   selectors, one per class using this) — any element on any page can
   carry the attribute and pick up a brand's colors this way, not just
   .cheatsheet/.components-page-inner. custom-components.hbs
   (@custom.Components_Theme) and custom-dashboard.hbs
   (@custom.Dashboard_Theme) both stamp it from their own Ghost Admin
   "Theme" select field, so picking one of these 49 slugs reuses that
   exact cheatsheet's color scheme instead of a separate hand-picked
   color — see each template's own header comment, and main.css's
   var(--cs-accent, var(--accent-color)) fallback pattern for what
   happens when a page's theme field is left as "none" (nothing here
   matches, so var()'s second argument kicks in instead). */
[data-cheatsheet-brand="claude-code"] { --cs-accent: #D97757; --cs-accent-2: #B85C3E; }
[data-cheatsheet-brand="midjourney"] { --cs-accent: #8B5CF6; --cs-accent-2: #C026D3; }
[data-cheatsheet-brand="aapanel"] { --cs-accent: #2EA44F; --cs-accent-2: #1F7A38; }
[data-cheatsheet-brand="cursor-ide-reference-guide"] { --cs-accent: #6C5CE7; --cs-accent-2: #3B82F6; }
[data-cheatsheet-brand="ghost-infrastructure-control-center"] { --cs-accent: #3EB489; --cs-accent-2: #1F8A5F; }
[data-cheatsheet-brand="ghost-theme-blueprint"] { --cs-accent: #3EB489; --cs-accent-2: #1F8A5F; }
[data-cheatsheet-brand="git-github"] { --cs-accent: #2DA44E; --cs-accent-2: #F05033; }
[data-cheatsheet-brand="google-gemni"] { --cs-accent: #4285F4; --cs-accent-2: #9B72CB; }
[data-cheatsheet-brand="instagram"] { --cs-accent: #E1306C; --cs-accent-2: #F77737; }
[data-cheatsheet-brand="linux"] { --cs-accent: #F7A41D; --cs-accent-2: #2C3E50; }
[data-cheatsheet-brand="macos"] { --cs-accent: #0A84FF; --cs-accent-2: #5E5CE6; }
[data-cheatsheet-brand="openai-codex"] { --cs-accent: #10A37F; --cs-accent-2: #1A7F64; }
[data-cheatsheet-brand="replit"] { --cs-accent: #F26207; --cs-accent-2: #FF7B29; }
[data-cheatsheet-brand="n8n"] { --cs-accent: #FF6D5A; --cs-accent-2: #EA4B71; }
[data-cheatsheet-brand="n8n-automation"] { --cs-accent: #FF6D5A; --cs-accent-2: #EA4B71; }
[data-cheatsheet-brand="wordpress"] { --cs-accent: #21759B; --cs-accent-2: #72AEE6; }
[data-cheatsheet-brand="processwire"] { --cs-accent: #2B87DA; --cs-accent-2: #17A2B8; }
[data-cheatsheet-brand="google-analytics"] { --cs-accent: #F9AB00; --cs-accent-2: #E37400; }
[data-cheatsheet-brand="figma"] { --cs-accent: #A259FF; --cs-accent-2: #F24E1E; }
[data-cheatsheet-brand="procreate"] { --cs-accent: #E6007A; --cs-accent-2: #7B2FF7; }
[data-cheatsheet-brand="photoshop"] { --cs-accent: #31A8FF; --cs-accent-2: #0A66C2; }
[data-cheatsheet-brand="illustrator"] { --cs-accent: #FF9A00; --cs-accent-2: #FF6F00; }
[data-cheatsheet-brand="indesign"] { --cs-accent: #FF3366; --cs-accent-2: #D4145A; }
[data-cheatsheet-brand="gimp"] { --cs-accent: #5B6E7F; --cs-accent-2: #3F7CAC; }
[data-cheatsheet-brand="digitalocean"] { --cs-accent: #0080FF; --cs-accent-2: #0069D9; }
[data-cheatsheet-brand="aws"] { --cs-accent: #FF9900; --cs-accent-2: #232F3E; }
[data-cheatsheet-brand="cloudflare"] { --cs-accent: #F38020; --cs-accent-2: #FAAD3F; }
[data-cheatsheet-brand="docker"] { --cs-accent: #2496ED; --cs-accent-2: #0DB7ED; }
[data-cheatsheet-brand="nginx"] { --cs-accent: #009639; --cs-accent-2: #269D3F; }
[data-cheatsheet-brand="mysql"] { --cs-accent: #4479A1; --cs-accent-2: #00618A; }
[data-cheatsheet-brand="postgresql"] { --cs-accent: #336791; --cs-accent-2: #4A7DA8; }
[data-cheatsheet-brand="redis"] { --cs-accent: #DC382D; --cs-accent-2: #A41E11; }
[data-cheatsheet-brand="vscode"] { --cs-accent: #007ACC; --cs-accent-2: #229BFF; }
[data-cheatsheet-brand="ssh"] { --cs-accent: #EFB93E; --cs-accent-2: #5B6E7F; }
[data-cheatsheet-brand="regex"] { --cs-accent: #2C4F82; --cs-accent-2: #4A73A8; }
[data-cheatsheet-brand="npm-nodejs"] { --cs-accent: #339933; --cs-accent-2: #CB3837; }
[data-cheatsheet-brand="chatgpt"] { --cs-accent: #10A37F; --cs-accent-2: #1A7F64; }
[data-cheatsheet-brand="notion"] { --cs-accent: #000000; --cs-accent-2: #6B6B6B; }
[data-cheatsheet-brand="slack"] { --cs-accent: #4A154B; --cs-accent-2: #ECB22E; }
[data-cheatsheet-brand="powershell"] { --cs-accent: #5391FE; --cs-accent-2: #012456; }
[data-cheatsheet-brand="arduino"] { --cs-accent: #00979D; --cs-accent-2: #00878C; }
[data-cheatsheet-brand="raspberry-pi"] { --cs-accent: #C51A4A; --cs-accent-2: #75A928; }
[data-cheatsheet-brand="iphone-ios"] { --cs-accent: #007AFF; --cs-accent-2: #5AC8FA; }
[data-cheatsheet-brand="ipados"] { --cs-accent: #BF5AF2; --cs-accent-2: #64D2FF; }
[data-cheatsheet-brand="windows"] { --cs-accent: #0078D4; --cs-accent-2: #00A4EF; }
[data-cheatsheet-brand="tiktok"] { --cs-accent: #FE2C55; --cs-accent-2: #25F4EE; }
[data-cheatsheet-brand="youtube"] { --cs-accent: #FF0000; --cs-accent-2: #CC0000; }
[data-cheatsheet-brand="facebook"] { --cs-accent: #1877F2; --cs-accent-2: #0C63D4; }
[data-cheatsheet-brand="android"] { --cs-accent: #3DDC84; --cs-accent-2: #0F9D58; }

/* Google Workspace + Microsoft 365 (2026-08-21) — same best-effort brand-
   color approach as the block above, one --cs-accent/--cs-accent-2 pair
   per product's own icon color rather than one flat "Google"/"Microsoft"
   color, so each page still reads as visually distinct on the index. */
[data-cheatsheet-brand="gmail"] { --cs-accent: #EA4335; --cs-accent-2: #C5221F; }
[data-cheatsheet-brand="google-drive"] { --cs-accent: #00AC47; --cs-accent-2: #188038; }
[data-cheatsheet-brand="google-docs"] { --cs-accent: #4285F4; --cs-accent-2: #1A73E8; }
[data-cheatsheet-brand="google-sheets"] { --cs-accent: #0F9D58; --cs-accent-2: #0B8043; }
[data-cheatsheet-brand="google-slides"] { --cs-accent: #FBBC04; --cs-accent-2: #F29900; }
[data-cheatsheet-brand="google-calendar"] { --cs-accent: #1A73E8; --cs-accent-2: #174EA6; }
[data-cheatsheet-brand="google-meet"] { --cs-accent: #00897B; --cs-accent-2: #00695C; }
[data-cheatsheet-brand="google-forms"] { --cs-accent: #673AB7; --cs-accent-2: #512DA8; }
[data-cheatsheet-brand="google-chat"] { --cs-accent: #00BFA5; --cs-accent-2: #00897B; }
[data-cheatsheet-brand="google-keep"] { --cs-accent: #FFBB00; --cs-accent-2: #F09300; }
[data-cheatsheet-brand="google-appsheet"] { --cs-accent: #5F6FFF; --cs-accent-2: #4550C4; }
[data-cheatsheet-brand="microsoft-word"] { --cs-accent: #2B579A; --cs-accent-2: #185ABD; }
[data-cheatsheet-brand="microsoft-excel"] { --cs-accent: #217346; --cs-accent-2: #185C37; }
[data-cheatsheet-brand="microsoft-powerpoint"] { --cs-accent: #D24726; --cs-accent-2: #B7472A; }
[data-cheatsheet-brand="microsoft-outlook"] { --cs-accent: #0078D4; --cs-accent-2: #005A9E; }
[data-cheatsheet-brand="microsoft-teams"] { --cs-accent: #6264A7; --cs-accent-2: #464775; }
[data-cheatsheet-brand="microsoft-onenote"] { --cs-accent: #7719AA; --cs-accent-2: #5C1A8C; }
[data-cheatsheet-brand="microsoft-onedrive"] { --cs-accent: #1490DF; --cs-accent-2: #0364B8; }
[data-cheatsheet-brand="microsoft-sharepoint"] { --cs-accent: #038387; --cs-accent-2: #036C70; }
[data-cheatsheet-brand="microsoft-access"] { --cs-accent: #A4373A; --cs-accent-2: #8C2A2C; }

/* Apple iWork + Salesforce + Grok/DeepSeek (2026-08-21) */
[data-cheatsheet-brand="apple-pages"] { --cs-accent: #1B79E0; --cs-accent-2: #0B5FB0; }
[data-cheatsheet-brand="apple-numbers"] { --cs-accent: #3CB53F; --cs-accent-2: #2A8A2C; }
[data-cheatsheet-brand="apple-keynote"] { --cs-accent: #FF7A00; --cs-accent-2: #E0570A; }
[data-cheatsheet-brand="salesforce"] { --cs-accent: #00A1E0; --cs-accent-2: #032D60; }
[data-cheatsheet-brand="grok"] { --cs-accent: #101828; --cs-accent-2: #364152; }
[data-cheatsheet-brand="herdr"] { --cs-accent: #6E7A88; --cs-accent-2: #383D42; }  /* slate, not the logo charcoal: one accent serves both Human and Cyber, and #383D42 scores 1.78:1 on the dark bg */
[data-cheatsheet-brand="lovable"] { --cs-accent: #E22E7A; --cs-accent-2: #FF6B2C; }  /* mid-gradient magenta + logo orange; the logo's own #FF6B2C is 2.84:1 on white */
[data-cheatsheet-brand="deepseek"] { --cs-accent: #5786FE; --cs-accent-2: #3A5FE0; }

/* Cloud/infra + collaboration batch (2026-08-21) */
[data-cheatsheet-brand="kubernetes"] { --cs-accent: #326CE5; --cs-accent-2: #1A4B8C; }
[data-cheatsheet-brand="terraform"] { --cs-accent: #7B42BC; --cs-accent-2: #4E2A85; }
[data-cheatsheet-brand="zoom"] { --cs-accent: #2D8CFF; --cs-accent-2: #0B5CD8; }
[data-cheatsheet-brand="jira"] { --cs-accent: #0052CC; --cs-accent-2: #0747A6; }
[data-cheatsheet-brand="confluence"] { --cs-accent: #2684FF; --cs-accent-2: #0052CC; }
[data-cheatsheet-brand="azure"] { --cs-accent: #0078D4; --cs-accent-2: #005BA1; }
[data-cheatsheet-brand="google-cloud"] { --cs-accent: #4285F4; --cs-accent-2: #34A853; }

/* Device Management / MDM (2026-08-21) */
[data-cheatsheet-brand="mdm-fundamentals"] { --cs-accent: #5B6E7F; --cs-accent-2: #3F7CAC; }
[data-cheatsheet-brand="microsoft-intune"] { --cs-accent: #0078D4; --cs-accent-2: #005BA1; }
[data-cheatsheet-brand="jamf"] { --cs-accent: #1263DE; --cs-accent-2: #0C47A0; }
[data-cheatsheet-brand="mosyle"] { --cs-accent: #1F8EFA; --cs-accent-2: #0A6ACB; }
[data-cheatsheet-brand="simplemdm"] { --cs-accent: #2F80ED; --cs-accent-2: #1B5FBF; }
[data-cheatsheet-brand="meraki"] { --cs-accent: #1BA0D7; --cs-accent-2: #0D6E96; }
[data-cheatsheet-brand="hexnode"] { --cs-accent: #FF5C35; --cs-accent-2: #D63F1C; }
[data-cheatsheet-brand="miradore"] { --cs-accent: #00A3A1; --cs-accent-2: #007A78; }
[data-cheatsheet-brand="ninjaone"] { --cs-accent: #14E687; --cs-accent-2: #0B7A47; }
[data-cheatsheet-brand="rippling-mdm"] { --cs-accent: #F2C94C; --cs-accent-2: #C79A12; }
[data-cheatsheet-brand="google-workspace-education"] { --cs-accent: #0F9D58; --cs-accent-2: #0B8043; }
[data-cheatsheet-brand="google-workspace-admin"] { --cs-accent: #1A73E8; --cs-accent-2: #174EA6; }
[data-cheatsheet-brand="mdm-for-education"] { --cs-accent: #7B61FF; --cs-accent-2: #5438D6; }
[data-cheatsheet-brand="munki"] { --cs-accent: #F5A623; --cs-accent-2: #C77D0A; }

/* Hero — order is eyebrow badge, title row, back link, subtitle (validated
   as a chatgpt-only beta test 2026-08-21, moving the back link below the
   title instead of above it, before rolling out here to every cheatsheet
   at once). .cheatsheet-hero > .wrap is a flex column with each child's
   visual position set by `order` below, rather than reordering
   custom-cheatsheet.hbs's actual markup — keeps the DOM/reading order
   (back link, eyebrow, title, subtitle) the same as before for anything
   depending on it (e.g. screen readers hitting the back-link first). */
.cheatsheet-hero { text-align: center; padding: 60px 0 40px; }
.cheatsheet-hero > .wrap { display: flex; flex-direction: column; align-items: center; }
.cheatsheet-eyebrow { order: 1; }
.cheatsheet-title-row { order: 2; }
.cheatsheet-back-link { order: 3; }
.cheatsheet-subtitle { order: 4; }
.cheatsheet-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--cs-text-muted); font-family: var(--font-mono); font-size: 0.8rem;
    text-decoration: none; margin: 16px 0 20px; transition: color 0.2s var(--ease);
}
.cheatsheet-back-link:hover { color: var(--cs-accent); }
.cheatsheet-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--cs-badge-bg); border: 1px solid var(--cs-tab-border); color: var(--cs-accent);
    font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
    padding: 6px 16px; border-radius: 30px; text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 16px;
}
.cheatsheet-title-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; }
.cheatsheet-title-row .cheatsheet-title { margin-bottom: 0; }
/* color-mix'd 80/20 toward --cs-text rather than pure --cs-accent — a few
   brand colors (ssh's #EFB93E, google-analytics' #F9AB00) are light
   enough that they'd fail heading-text contrast against a light Human-mode
   card even though they read fine as a thin border/tint. 80/20 keeps the
   brand hue clearly recognizable while darkening enough to stay legible.
   Cyber mode still overrides to solid white below regardless — every
   page's cheatsheet card is dark there, so white always wins on contrast
   without needing per-brand tuning. */
.cheatsheet-title { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 12px; color: color-mix(in srgb, var(--cs-accent) 80%, var(--cs-text) 20%); }
:root[data-theme="cyber"] .cheatsheet-title { color: #ffffff; }
/* Snappier curtain timing on the library index title (2026-08-22).
   The defaults (26ms stagger, 100ms offset, 0.95s duration) are tuned for
   a one-off hero and land this 20-character title at ~1.54s — too slow
   for the hub page people return to most. These values resolve it in
   ~1.05s while keeping the same masked-rise character.
   See custom-cheatsheet-index.hbs for where the attribute is applied. */
.cheatsheet-hero .cheatsheet-title[data-curtain-text] {
    --curtain-stagger: 14ms;
    --curtain-offset: 40ms;
    --curtain-duration: 0.75s;
}
/* Direct-child selector, not a bare .cheatsheet-title rule — custom-
   cheatsheet-index.hbs's hero has no title-row wrapper (no prev/next
   pager on the index page), so .cheatsheet-title is a direct flex child
   of .wrap there and needs its own order. On a real cheatsheet page the
   title is a GRANDCHILD instead (.wrap > .cheatsheet-title-row >
   .cheatsheet-title) — a bare .cheatsheet-title{order:2} rule was
   matching there too, but .cheatsheet-title-row is its OWN separate flex
   container (for prev/title/next), so it reordered the title after both
   pager buttons ("< > Title" instead of "< Title >"). Scoping to
   ">" here means it only ever applies where title is truly a direct
   child of the hero wrap. */
.cheatsheet-hero > .wrap > .cheatsheet-title { order: 2; }
.cheatsheet-subtitle { color: var(--cs-text-2); font-size: clamp(1rem, 2.5vw, 1.15rem); max-width: 640px; margin: 0 auto; }

/* Live total-count stat on the /cheatsheet-libraries/ hero only (2026-08-21)
   — see custom-cheatsheet-index.hbs's header comment for how the number
   itself is sourced. */
.cheatsheet-index-stat { order: 5; margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cheatsheet-index-stat .count-up-number { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: var(--cs-accent, var(--accent-color)); line-height: 1; }
.cheatsheet-index-stat-label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--cs-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Prev/Next pager buttons flanking the hero title (wired up by cheatsheet.js). */
.cheatsheet-pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%;
    border: 1px solid var(--cs-tab-border); color: var(--cs-text-2);
    text-decoration: none; font-size: 0.9rem;
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
}
.cheatsheet-pager-btn:hover { border-color: var(--cs-accent); color: var(--cs-accent); background: var(--cs-badge-bg); }

.cheatsheet-content { padding-bottom: 60px; overflow-x: hidden; max-width: 100%; }

/* Tab navigation */
.tab-nav {
    display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px;
    border-bottom: 2px solid var(--cs-tab-border); padding-bottom: 14px;
}
.tab-btn {
    background: var(--cs-surface); border: 1px solid var(--cs-tab-border); color: var(--cs-text-2);
    padding: 12px 22px; border-radius: 12px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s var(--ease);
    display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
.tab-btn i { font-size: 1.05rem; color: var(--cs-accent); transition: color 0.2s var(--ease); }
.tab-btn:hover { background: var(--cs-surface-hover); color: var(--cs-text); border-color: var(--cs-accent); }
.tab-btn.active {
    background: color-mix(in srgb, var(--cs-accent) 16%, transparent);
    border-color: var(--cs-accent); color: var(--cs-text);
    box-shadow: 0 0 20px color-mix(in srgb, var(--cs-accent) 25%, transparent);
}
.tab-btn.active i { color: var(--cs-accent-2); }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: cheatsheetFadeIn 0.3s ease-in-out; }

/* Secondary/nested tab nav — used when a main tab itself needs sub-tabs */
.tab-nav--sub {
    gap: 8px; margin-bottom: 24px; padding-bottom: 10px;
    border-bottom: 1px solid var(--cs-border);
}
.tab-nav--sub .tab-btn { padding: 8px 16px; font-size: 0.85rem; border-radius: 10px; }
.tab-nav--sub .tab-btn i { font-size: 0.9rem; }
@keyframes cheatsheetFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Section headings */
.section-heading {
    font-size: 1.5rem; margin: 40px 0 20px; display: flex; align-items: center; gap: 12px;
    color: var(--cs-text); border-bottom: 2px solid var(--cs-border); padding-bottom: 10px;
}
.section-heading i { color: var(--cs-accent); }
.section-intro { color: var(--cs-text-2); margin: -12px 0 20px; max-width: 70ch; }

/* Search + stats controls */
.controls-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.search-container { position: relative; flex: 1; min-width: 260px; }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cs-text-muted); pointer-events: none; }
.search-input {
    width: 100%; height: 48px; padding: 12px 16px 12px 46px;
    background: var(--cs-surface); border: 1px solid var(--cs-tab-border); border-radius: 12px;
    color: var(--cs-text); font-size: 0.95rem; font-family: var(--font-body); outline: none;
    transition: all 0.2s var(--ease); box-shadow: var(--shadow-sm);
}
.search-input:focus { border-color: var(--cs-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 15%, transparent); }
.stats-badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--cs-text-2);
    background: var(--cs-surface); padding: 12px 18px; border-radius: 10px; border: 1px solid var(--cs-tab-border); white-space: nowrap;
}
.stats-badge span { color: var(--cs-accent); font-weight: 700; }

/* Table card */
.table-card {
    background: var(--cs-surface); border: 1px solid var(--cs-tab-border); border-radius: var(--cs-radius);
    overflow: hidden; box-shadow: var(--shadow-md); width: 100%; max-width: 100%;
}
.table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cheatsheet table { width: 100%; border-collapse: collapse; text-align: left; font-size: 0.92rem; table-layout: auto; }
.cheatsheet thead { background: var(--cs-table-header); border-bottom: 2px solid var(--cs-border); }
.cheatsheet th {
    padding: 16px 18px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--cs-text-2); white-space: nowrap;
}
.cheatsheet th i { margin-right: 6px; color: var(--cs-accent); }
.cheatsheet tbody tr { border-bottom: 1px solid var(--cs-border); transition: background-color 0.15s ease; }
.cheatsheet tbody tr:last-child { border-bottom: none; }
.cheatsheet tbody tr:nth-child(even) { background: var(--cs-table-row-alt); }
.cheatsheet tbody tr:hover { background: var(--cs-table-hover); }
.cheatsheet td { padding: 16px 18px; vertical-align: middle; word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
.col-syntax { white-space: nowrap; min-width: 130px; }

/* Tags & version badges */
.cat-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600; background: var(--cs-badge-bg); color: var(--cs-badge-text);
    border: 1px solid var(--cs-code-border); white-space: nowrap;
}
.ver-badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700; white-space: nowrap; letter-spacing: 0.03em;
    background: color-mix(in srgb, var(--cs-accent-2) 15%, transparent); color: var(--cs-accent-2);
    border: 1px solid color-mix(in srgb, var(--cs-accent-2) 35%, transparent);
}
.ver-all { background: color-mix(in srgb, var(--cs-text-muted) 14%, transparent); color: var(--cs-text-2); border-color: color-mix(in srgb, var(--cs-text-muted) 28%, transparent); }
.ver-legacy { background: color-mix(in srgb, var(--cs-rose) 15%, transparent); color: var(--cs-rose); border-color: color-mix(in srgb, var(--cs-rose) 35%, transparent); }
.param-title { font-weight: 700; color: var(--cs-text); font-size: 0.95rem; white-space: nowrap; }

code.syntax-code, code.example-code {
    font-family: var(--font-mono); padding: 5px 10px; border-radius: 6px; font-size: 0.85rem;
    display: inline-block; white-space: nowrap;
}
code.syntax-code { background: var(--cs-code-bg); color: var(--cs-accent); border: 1px solid var(--cs-code-border); }
code.example-code {
    background: color-mix(in srgb, var(--cs-green) 8%, transparent); color: var(--cs-green);
    border: 1px solid color-mix(in srgb, var(--cs-green) 25%, transparent);
    white-space: normal; word-break: break-word; max-width: 260px;
}
.val-range { color: var(--cs-text-2); font-size: 0.88rem; min-width: 140px; }
.desc-text { color: var(--cs-text-2); font-size: 0.9rem; line-height: 1.5; min-width: 250px; max-width: 450px; white-space: normal; }

/* Formula & vocabulary */
.formula-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 24px; margin-bottom: 30px; }
.formula-box {
    background: var(--cs-code-bg); border: 1px solid var(--cs-code-border); border-radius: 12px; padding: 16px;
    font-family: var(--font-mono); font-size: 0.95rem; color: var(--cs-amber); text-align: center;
    margin-bottom: 24px; word-break: break-word;
}
.formula-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 28px; }
.formula-step { background: color-mix(in srgb, var(--cs-text) 3%, transparent); border: 1px solid var(--cs-border); border-radius: 10px; padding: 14px; }
.formula-step h4 { color: var(--cs-accent); font-size: 0.9rem; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.formula-step p { color: var(--cs-text-2); font-size: 0.85rem; line-height: 1.4; }
.vocab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.vocab-card { background: color-mix(in srgb, var(--cs-text) 3%, transparent); border: 1px solid var(--cs-border); border-radius: 12px; padding: 16px; }
.vocab-card h4 { font-size: 0.95rem; color: var(--cs-accent-2); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.vocab-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vocab-tag { background: var(--cs-code-bg); border: 1px solid var(--cs-border); color: var(--cs-text); padding: 4px 10px; border-radius: 6px; font-size: 0.8rem; font-family: var(--font-mono); }

/* Step-by-step setup guides */
.guide-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 28px; margin-bottom: 30px; box-shadow: var(--shadow-md); }
.guide-banner {
    background: color-mix(in srgb, var(--cs-accent) 10%, transparent); border: 1px solid var(--cs-border); border-radius: 12px;
    padding: 20px; margin-bottom: 28px; display: flex; align-items: flex-start; gap: 16px;
}
.guide-banner-icon { font-size: 2rem; color: var(--cs-accent); background: var(--cs-code-bg); padding: 14px; border-radius: 12px; border: 1px solid var(--cs-code-border); }
.guide-banner-text h3 { font-size: 1.2rem; color: var(--cs-text); margin-bottom: 6px; }
.guide-banner-text p { color: var(--cs-text-2); font-size: 0.92rem; line-height: 1.5; }
.step-timeline { display: flex; flex-direction: column; gap: 24px; }
.step-item {
    display: flex; gap: 18px; background: color-mix(in srgb, var(--cs-text) 3%, transparent);
    border: 1px solid var(--cs-border); border-radius: 14px; padding: 20px;
    transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.step-item:hover { border-color: var(--cs-accent); transform: translateY(-2px); }
.step-badge {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--cs-accent), var(--cs-accent-2));
    color: var(--bg-primary); font-weight: 800; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--cs-accent) 30%, transparent);
}
.step-content { flex: 1; min-width: 0; }
.step-content h4 { font-size: 1.05rem; color: var(--cs-accent); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.step-content p { color: var(--cs-text-2); font-size: 0.92rem; line-height: 1.5; margin-bottom: 12px; }
.step-code-box {
    background: var(--cs-code-bg); border: 1px solid var(--cs-code-border); border-radius: 8px; padding: 12px 16px;
    font-family: var(--font-mono); font-size: 0.88rem; color: var(--cs-green); margin-top: 8px; word-break: break-all;
}

/* Tips grid */
.tips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 30px; }
.tip-card {
    background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 12px; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.tip-card:hover { transform: translateY(-2px); border-color: var(--cs-accent); }
.tip-card-header { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--cs-accent); font-size: 1.05rem; }
.tip-card-body { color: var(--cs-text-2); font-size: 0.9rem; line-height: 1.5; }
.tip-card code {
    font-family: var(--font-mono); background: var(--cs-code-bg); color: var(--cs-green); padding: 6px 10px; border-radius: 6px;
    border: 1px solid var(--cs-code-border); font-size: 0.85rem; display: block; margin-top: 8px; word-break: break-all;
}
.tip-note { display: block; margin-top: 8px; font-size: 0.82rem; color: var(--cs-amber); font-style: italic; }

/* Copy-to-clipboard trigger buttons ([data-copy-trigger] in cheatsheet.js) */
[data-copy-trigger] { cursor: pointer; transition: color 0.2s var(--ease); }
[data-copy-trigger].copied { color: var(--cs-green) !important; }

/* Rules & framework */
.rules-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 24px; margin-bottom: 30px; }
.rule-block { margin-bottom: 24px; }
.rule-block:last-child { margin-bottom: 0; }
.rule-title { font-size: 1.1rem; font-weight: 700; color: var(--cs-accent-2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rule-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rule-list li { position: relative; padding-left: 24px; color: var(--cs-text-2); font-size: 0.92rem; line-height: 1.5; }
.rule-list li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 2px; color: var(--cs-green); font-size: 0.8rem;
}
.rule-list strong { color: var(--cs-text); }
.sample-prompt-box {
    background: var(--cs-code-bg); border: 1px solid var(--cs-code-border); border-radius: 10px; padding: 16px;
    font-family: var(--font-mono); font-size: 0.88rem; color: var(--cs-accent); line-height: 1.6; margin-top: 10px; word-break: break-word;
}

/* Resource links (2026-08-21) — an "Official docs & further reading"
   section for cheatsheet pages, pointing at each product's own primary
   sources so a page stays useful even as the vendor changes things under
   it. Deliberately a link grid rather than reusing .tip-card: these are
   always outbound links (target="_blank"), so they get the arrow affordance
   and host label a tip card has no reason to carry. Every link should name
   its host in .resource-link-host so the destination is visible before
   clicking. Brand-tinted via --cs-accent like every other component here. */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 30px; }
.resource-link {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 18px 20px; background: var(--cs-surface);
    border: 1px solid var(--cs-border); border-radius: var(--radius-md);
    text-decoration: none; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.resource-link:hover { border-color: var(--cs-accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.resource-link::after {
    content: "\f08e"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 16px; right: 18px; font-size: 0.75rem;
    color: var(--cs-accent); opacity: 0; transition: opacity 0.2s var(--ease);
}
.resource-link:hover::after { opacity: 1; }
.resource-link-title { display: flex; align-items: center; gap: 9px; font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--cs-text); padding-right: 22px; }
.resource-link-title i { color: var(--cs-accent); font-size: 0.9rem; }
.resource-link-desc { color: var(--cs-text-2); font-size: 0.86rem; line-height: 1.55; }
.resource-link-host { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cs-text-muted); letter-spacing: 0.03em; }

/* Native Ghost comments (2026-08-22) — see custom-cheatsheet.hbs's own
   comment for why this renders on pages at all. Ghost's comments-ui is an
   injected script that styles itself from the site accent colour, so this
   rule only handles spacing and the separator above it. */
.cheatsheet-comments { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--cs-border); }
.cheatsheet-comments:empty { display: none; border-top: none; margin: 0; padding: 0; }

/* Footer note */
.cheatsheet-footer-note {
    text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--cs-border);
    color: var(--cs-text-muted); font-size: 0.85rem; display: flex; flex-direction: column; gap: 6px;
}
.cheatsheet-footer-note .fa-heart { color: var(--cs-rose); }

/* The library index's background pattern is now the sitewide system —
   see assets/css/bg-patterns.css — rather than a one-off rule here.
   Tagged "bg-pattern-1" (see README §12b) to keep the grid+glow look Tyler
   already approved for this specific page. */

/* Library index (custom-cheatsheet-index.hbs) */
.cheatsheet-category { margin-bottom: 48px; }
.cheatsheet-category:last-of-type { margin-bottom: 0; }
.cheatsheet-category-heading {
    display: flex; align-items: center; gap: 10px;
    font-size: 1.3rem; margin-bottom: 4px;
    padding-bottom: 12px; border-bottom: 1px solid var(--cs-border);
}
.cheatsheet-category-heading i { color: var(--cs-accent); font-size: 1.1rem; }
.cheatsheet-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 12px; }
.cheatsheet-index-card {
    display: flex; flex-direction: column; gap: 8px; position: relative;
    background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 14px; padding: 22px;
    text-decoration: none; color: var(--cs-text); transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.cheatsheet-index-card:hover { transform: translateY(-2px); border-color: var(--cs-accent); }
.cheatsheet-index-card-head { display: flex; align-items: center; gap: 12px; }
.cheatsheet-index-card-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px;
    background-color: #fff; border: 1px solid var(--cs-border);
    background-size: 68%; background-repeat: no-repeat; background-position: center;
    box-shadow: var(--shadow-sm);
}
.cheatsheet-index-card-title { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.cheatsheet-index-card-excerpt { color: var(--cs-text-2); font-size: 0.88rem; line-height: 1.4; margin-top: 8px; display: block; }
.cheatsheet-index-card i { position: absolute; top: 22px; right: 22px; color: var(--cs-accent); opacity: 0; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.cheatsheet-index-card:hover i { opacity: 1; transform: translateX(3px); }
.cheatsheet-index-empty { color: var(--cs-text-muted); text-align: center; padding: 40px 0; }

/* Per-card brand favicon, keyed on the same data-cheatsheet-brand slug used
   for the accent-color overrides above. Self-hosted (assets/images/cheatsheet-icons/)
   rather than hotlinked, so the index doesn't depend on 15 third-party domains
   staying up. A slug with no match here just shows a blank icon chip. */
.cheatsheet-index-card[data-cheatsheet-brand="claude-code"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/claude-code.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="midjourney"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/midjourney.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="aapanel"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/aapanel.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="cursor-ide-reference-guide"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/cursor-ide-reference-guide-and-cheatsheet.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="ghost-infrastructure-control-center"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/ghost-infrastructure-control-center.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="ghost-theme-blueprint"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/ghost-theme-blueprint.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="git-github"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/git-github.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-gemni"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-gemni.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="instagram"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/instagram.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="linux"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/linux.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="macos"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/macos.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="openai-codex"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/openai-codex.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="replit"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/replit.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="n8n"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/n8n.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="n8n-automation"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/n8n-automation.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="wordpress"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/wordpress.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="processwire"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/processwire.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-analytics"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-analytics.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="figma"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/figma.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="procreate"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/procreate.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="photoshop"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/photoshop.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="illustrator"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/illustrator.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="indesign"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/indesign.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="gimp"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/gimp.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="digitalocean"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/digitalocean.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="aws"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/aws.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="cloudflare"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/cloudflare.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="docker"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/docker.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="nginx"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/nginx.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="mysql"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/mysql.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="postgresql"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/postgresql.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="redis"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/redis.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="vscode"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/vscode.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="ssh"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/ssh.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="regex"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/regex.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="npm-nodejs"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/npm-nodejs.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="chatgpt"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/chatgpt.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="notion"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/notion.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="slack"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/slack.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="powershell"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/powershell.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="arduino"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/arduino.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="raspberry-pi"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/raspberry-pi.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="iphone-ios"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/iphone-ios.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="ipados"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/ipados.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="windows"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/windows.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="tiktok"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/tiktok.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="youtube"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/youtube.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="facebook"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/facebook.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="android"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/android.png"); }

/* Google Workspace + Microsoft 365 (2026-08-21) — Google icons are Simple
   Icons SVGs (open-source brand-icon set, self-hosted like every icon
   above); AppSheet + most Microsoft apps are each product's own real
   favicon (fetched from word.cloud.microsoft / excel.cloud.microsoft /
   powerpoint.cloud.microsoft / outlook.office.com / teams.microsoft.com /
   onenote.com / onedrive.cloud.microsoft — Microsoft doesn't publish these
   in an open icon set the way Simple Icons covers Google's). SharePoint
   and Access have no distinct web-app favicon of their own (both resolve
   to Microsoft's generic site icon), so those two fall back to the
   fa-microsoft brand glyph in a solid ::before below instead of a blurry
   generic globe image. */
.cheatsheet-index-card[data-cheatsheet-brand="gmail"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/gmail.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-drive"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-drive.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-docs"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-docs.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-sheets"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-sheets.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-slides"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-slides.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-calendar"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-calendar.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-meet"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-meet.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-forms"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-forms.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-chat"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-chat.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-keep"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-keep.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-appsheet"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-appsheet.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-word"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-word.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-excel"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-excel.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-powerpoint"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-powerpoint.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-outlook"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-outlook.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-teams"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-teams.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-onenote"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-onenote.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-onedrive"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-onedrive.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-sharepoint"] .cheatsheet-index-card-icon,
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-access"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-sharepoint"] .cheatsheet-index-card-icon::before,
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-access"] .cheatsheet-index-card-icon::before {
    font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f3ca"; color: #fff; font-size: 16px;
}

/* Apple iWork (2026-08-21) — none of the three have a distinct web-app
   favicon of their own (Pages/Numbers/Keynote all live at icloud.com
   paths, which only exposes one shared iCloud favicon), so each falls
   back to a solid FA icon evoking its content type (document/table/
   screen) instead of a generic Apple logo repeated three times. */
.cheatsheet-index-card[data-cheatsheet-brand="apple-pages"] .cheatsheet-index-card-icon,
.cheatsheet-index-card[data-cheatsheet-brand="apple-numbers"] .cheatsheet-index-card-icon,
.cheatsheet-index-card[data-cheatsheet-brand="apple-keynote"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="apple-pages"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f15c"; color: #fff; font-size: 16px; }
.cheatsheet-index-card[data-cheatsheet-brand="apple-numbers"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0ce"; color: #fff; font-size: 16px; }
.cheatsheet-index-card[data-cheatsheet-brand="apple-keynote"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f390"; color: #fff; font-size: 16px; }

/* Salesforce + Grok/DeepSeek (2026-08-21). Salesforce and Grok have no
   Simple Icons entry (trademark/curation gaps, same as Microsoft's
   products), so they use their real FA brand glyph (Salesforce) or a
   generic robot glyph (Grok, no FA brand icon exists for it at all) on a
   solid accent chip; DeepSeek does have a Simple Icons entry, so it's a
   real self-hosted logo like the Google Workspace set above. */
.cheatsheet-index-card[data-cheatsheet-brand="salesforce"] .cheatsheet-index-card-icon,
.cheatsheet-index-card[data-cheatsheet-brand="grok"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="salesforce"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f83b"; color: #fff; font-size: 16px; }
.cheatsheet-index-card[data-cheatsheet-brand="grok"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f544"; color: #fff; font-size: 16px; }
.cheatsheet-index-card[data-cheatsheet-brand="deepseek"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/deepseek.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="herdr"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/herdr.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="lovable"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/lovable.png"); }

/* Cloud/infra + collaboration batch (2026-08-21) — Kubernetes, Terraform,
   Zoom, Jira, Confluence, and Google Cloud all have real Simple Icons
   entries; Azure doesn't (same Microsoft trademark gap as Word/Excel/
   SharePoint/Access above), so it falls back to the fa-microsoft glyph. */
.cheatsheet-index-card[data-cheatsheet-brand="kubernetes"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/kubernetes.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="terraform"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/terraform.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="zoom"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/zoom.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="jira"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/jira.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="confluence"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/confluence.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-cloud"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-cloud.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="azure"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="azure"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f3ca"; color: #fff; font-size: 16px; }

/* Device Management / MDM (2026-08-21) — Jamf, Mosyle, Hexnode, SimpleMDM,
   Miradore, NinjaOne, Rippling and Intune use each vendor's own favicon
   (none are in Simple Icons); Meraki uses the Cisco mark since Meraki has
   no separate entry. The two concept pages (mdm-fundamentals,
   mdm-for-education) have no vendor at all, so they use a solid FA glyph
   chip like the SharePoint/Access/Grok fallbacks above. */
.cheatsheet-index-card[data-cheatsheet-brand="jamf"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/jamf.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="mosyle"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/mosyle.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="simplemdm"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/simplemdm.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="hexnode"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/hexnode.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="miradore"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/miradore.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="ninjaone"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/ninjaone.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="rippling-mdm"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/rippling-mdm.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="microsoft-intune"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/microsoft-intune.png"); }
.cheatsheet-index-card[data-cheatsheet-brand="meraki"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/meraki.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-workspace-education"] .cheatsheet-index-card-icon { background-image: url("../images/cheatsheet-icons/google-workspace-education.svg"); }
.cheatsheet-index-card[data-cheatsheet-brand="google-workspace-admin"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="google-workspace-admin"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f505"; color: #fff; font-size: 15px; }
.cheatsheet-index-card[data-cheatsheet-brand="mdm-fundamentals"] .cheatsheet-index-card-icon,
.cheatsheet-index-card[data-cheatsheet-brand="mdm-for-education"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="mdm-fundamentals"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f3cd"; color: #fff; font-size: 16px; }
.cheatsheet-index-card[data-cheatsheet-brand="mdm-for-education"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f19d"; color: #fff; font-size: 16px; }
.cheatsheet-index-card[data-cheatsheet-brand="munki"] .cheatsheet-index-card-icon {
    background-color: var(--cs-accent); display: flex; align-items: center; justify-content: center;
}
.cheatsheet-index-card[data-cheatsheet-brand="munki"] .cheatsheet-index-card-icon::before { font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f49e"; color: #fff; font-size: 15px; }

/* Legacy classes kept for any page still using the old inline system */
.cheat-sheet-container { max-width: 900px; margin: 0 auto; }
.cheat-card { background: var(--cs-surface); border: 1px solid var(--cs-border); padding: 36px; margin-bottom: 32px; }
.subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.subtab-btn {
    border: 1px solid var(--cs-border); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
    color: var(--cs-text-2); padding: 9px 18px; transition: all 0.2s var(--ease); background: none; cursor: pointer;
}
.subtab-btn.active { background: var(--cs-accent); border-color: var(--cs-accent); color: var(--bg-primary); }
.subtab-pane { display: none; }
.subtab-pane.active { display: block; }

/* Mobile card-view (kills horizontal scroll on tables at narrow widths) */
@media (max-width: 768px) {
    .cheatsheet-hero { padding: 40px 0 28px; }
    .cheatsheet-title-row { gap: 8px; }
    .cheatsheet-pager-btn { width: 32px; height: 32px; font-size: 0.75rem; }
    .controls-wrapper { flex-direction: column; align-items: stretch; gap: 10px; }
    .search-container { max-width: 100%; }
    .stats-badge { justify-content: center; padding: 10px; }

    .table-card { background: transparent; border: none; box-shadow: none; overflow: visible; }
    .table-wrapper { overflow: visible; }

    .cheatsheet table, .cheatsheet thead, .cheatsheet tbody,
    .cheatsheet th, .cheatsheet td, .cheatsheet tr { display: block; }
    .cheatsheet thead { display: none; }

    .cheatsheet tbody tr {
        background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 14px;
        margin-bottom: 16px; padding: 16px; box-shadow: var(--shadow-sm);
    }
    .cheatsheet tbody tr:hover { background: var(--cs-surface); }

    .cheatsheet td { padding: 6px 0; border: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
    .cheatsheet td::before {
        content: attr(data-label); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.08em; color: var(--cs-text-muted); margin-bottom: 2px;
    }
    .cheatsheet td:first-child { padding-top: 0; }
    .cheatsheet td:last-child { padding-bottom: 0; border-top: 1px dashed var(--cs-border); margin-top: 6px; padding-top: 10px; }

    .param-title { font-size: 1.1rem; color: var(--cs-accent); }
    .desc-text { max-width: 100%; min-width: 0; }
    code.syntax-code, code.example-code { width: auto; max-width: 100%; white-space: normal; word-break: break-word; }

    .step-item { flex-direction: column; gap: 12px; }
    .guide-banner { flex-direction: column; }
}

/* Belt-and-suspenders: nothing inside a cheatsheet page can force the
   whole viewport to scroll sideways, no matter what gets pasted into
   the Ghost editor for a future page. */
.cheatsheet, .cheatsheet * { max-width: 100%; }
.cheatsheet pre, .cheatsheet code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }