/* DFIRe site styles. Tokens are copied verbatim from the dfire_frontend design system:
   edit them there and re-sync rather than here. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('Inter-Regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('Inter-Medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('Inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('Inter-Bold.woff2') format('woff2')}

.light {
  /* Page backgrounds */
  --color-page: #f8fafc;
  /* slate-50 */
  --color-page-secondary: #f1f5f9;
  /* slate-100 */
  /* Card/surface backgrounds */
  --color-card: #ffffff;
  --color-card-hover: #f8fafc;
  /* Borders */
  --color-border: #e2e8f0;
  /* slate-200 */
  --color-border-secondary: #f1f5f9;
  /* slate-100 */
  /* Text */
  --color-text-primary: #0f172a;
  /* slate-900 */
  --color-text-secondary: #475569;
  /* slate-600 */
  --color-text-muted: #94a3b8;
  /* slate-400 */
  /* Disabled control labels. Deliberately the SAME mid-tone in both themes:
       a disabled control should read identically light and dark, and a mid
       grey contrasts with both a near-white and a near-black surface (4.34
       and 3.30 against --color-page-secondary). The muted token cannot do
       this job — it is slate-400 here, which lands at 2.34 on the light
       surface, faint enough that the label stops being readable. */
  --color-text-disabled: #64748b;
  /* slate-500 */
  /* Accent (Blue) */
  --color-accent-50: #eff6ff;
  --color-accent-100: #dbeafe;
  --color-accent-500: #3b82f6;
  --color-accent-600: #2563eb;
  --color-accent-700: #1d4ed8;
  /* Header */
  --color-header-bg: #ffffff;
  --color-header-border: #e2e8f0;
  /* Input fields */
  --color-input-bg: #ffffff;
  --color-input-border: #cbd5e1;
  /* slate-300 */
  --color-input-focus: #3b82f6;
  /* Status colors (kept consistent across themes) */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  /* Button drop shadow — "floats above the surface" elevation, layered for a
       soft modern look, tuned per theme so it reads on light surfaces */
  --shadow-button: 0 4px 12px -1px rgb(15 23 42 / 0.22), 0 2px 5px -1px rgb(15 23 42 / 0.14);
  /* Content-card elevation — large soft blur so cards float above the page */
  --shadow-card: 0 8px 24px -4px rgb(15 23 42 / 0.16), 0 4px 8px -4px rgb(15 23 42 / 0.10);
}
.dark {
  /* Page backgrounds */
  --color-page: #0f172a;
  /* slate-900 */
  --color-page-secondary: #1a2335;
  /* recessed tint, a step below the card so
                                        section headers / secondary surfaces read
                                        as distinct (slate-800 matched the card) */
  /* Card/surface backgrounds */
  --color-card: #1e293b;
  /* slate-800 */
  --color-card-hover: #334155;
  /* slate-700 */
  /* Borders */
  --color-border: #334155;
  /* slate-700 */
  --color-border-secondary: #2a374a;
  /* soft divider — visible on the card
                                          (slate-800 was invisible against it) */
  /* Text */
  --color-text-primary: #f1f5f9;
  /* slate-100 */
  --color-text-secondary: #cbd5e1;
  /* slate-300 */
  --color-text-muted: #64748b;
  /* slate-500 */
  --color-text-disabled: #64748b;
  /* slate-500, same as light on purpose */
  /* Accent (Blue - slightly brighter for dark bg) */
  --color-accent-50: #1e3a5f;
  --color-accent-100: #1e40af;
  --color-accent-500: #3b82f6;
  --color-accent-600: #60a5fa;
  --color-accent-700: #93c5fd;
  /* Header */
  --color-header-bg: #1e293b;
  --color-header-border: #334155;
  /* Input fields */
  --color-input-bg: #0f172a;
  --color-input-border: #475569;
  /* slate-600 */
  --color-input-focus: #60a5fa;
  /* Status colors */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error: #f87171;
  --color-info: #60a5fa;
  /* Button drop shadow — "floats above the surface" elevation, deeper black
       so it reads against dark surfaces */
  --shadow-button: 0 4px 14px -1px rgb(0 0 0 / 0.35), 0 2px 6px -1px rgb(0 0 0 / 0.25);
  /* Content-card elevation — deeper black so cards float against dark surfaces */
  --shadow-card: 0 8px 28px -4px rgb(0 0 0 / 0.4), 0 4px 10px -4px rgb(0 0 0 / 0.28);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html.light{--logo-filter:none}
html.dark{--logo-filter:invert(1)}
body{margin:0;background:var(--color-page);color:var(--color-text-primary);font-family:Inter,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.6;text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,pre,figure{margin:0}
img{max-width:100%;display:block}
a{color:var(--color-accent-600);text-decoration:none}
a:hover{color:var(--color-accent-500)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
:focus-visible{outline:2px solid var(--color-accent-500);outline-offset:2px}

/* Aurora wash: a static stand-in for the app's animated AppBackground. */
.aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60% 50% at 15% 0%, color-mix(in srgb, var(--color-accent-500) 16%, transparent), transparent 70%),
  radial-gradient(50% 45% at 85% 8%, color-mix(in srgb, var(--color-accent-700) 14%, transparent), transparent 70%),
  radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--color-accent-600) 10%, transparent), transparent 70%)}
html.light .aurora{opacity:.5}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{text-decoration:none}
.btn-sm{padding:7px 13px;font-size:14px}
.btn-md{padding:9px 16px;font-size:15px}
.btn-lg{padding:12px 22px;font-size:16px}
.btn-primary{background:var(--color-accent-500);color:#fff;box-shadow:var(--shadow-button)}
.btn-primary:hover{background:var(--color-accent-600);color:#fff}
.btn-secondary{background:var(--color-card);color:var(--color-text-primary);border-color:var(--color-border);box-shadow:var(--shadow-button)}
.btn-secondary:hover{background:var(--color-card-hover);color:var(--color-text-primary)}

/* The button is a flex item, not an overlay: a command longer than the box
   scrolls inside its own column and can never run underneath the button. */
.code{display:flex;align-items:flex-start;gap:12px;background:var(--color-card);border:1px solid var(--color-border);border-radius:12px;box-shadow:var(--shadow-card)}
.code code{flex:1 1 auto;min-width:0;padding:16px 0 16px 18px;font-size:14px;line-height:1.6;color:var(--color-text-primary);white-space:pre-wrap;overflow-wrap:anywhere}
.code button{flex:0 0 auto;margin:10px 10px 10px 0;padding:6px 12px;font:500 13px/1 Inter,system-ui,sans-serif;color:var(--color-text-secondary);background:var(--color-page-secondary);border:1px solid var(--color-border);border-radius:8px;cursor:pointer}
.code button:hover{color:var(--color-text-primary)}

.shot{border-radius:22px;box-shadow:0 26px 70px -18px rgba(2,6,23,.55),0 8px 24px -8px rgba(2,6,23,.35);width:100%}
/* Half-width screenshots need a radius scaled to their rendered size, or the
   corner eats into the browser chrome drawn in the image. */
.shot-sm{border-radius:10px;box-shadow:0 26px 70px -18px rgba(2,6,23,.55),0 8px 24px -8px rgba(2,6,23,.35);width:100%}

.docs-body{--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.docs-body a{color:var(--color-accent-600);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--color-accent-600) 34%,transparent)}
.docs-body a:hover{color:var(--color-accent-500);border-bottom-color:var(--color-accent-500)}
.docs-body h2{margin:56px 0 0;padding-top:32px;border-top:1px solid var(--color-border);font-size:26px;line-height:1.2;letter-spacing:-.018em;font-weight:700;color:var(--color-text-primary)}
.docs-body .docs-section:first-child h2:first-child{margin-top:44px}
.docs-body h3{margin:32px 0 0;font-size:19px;line-height:1.35;font-weight:600;color:var(--color-text-primary)}
.docs-body h4{margin:24px 0 0;font-size:16px;line-height:1.4;font-weight:600;color:var(--color-text-primary)}
.docs-body p{margin:16px 0 0;color:var(--color-text-secondary)}
.docs-body ul,.docs-body ol{margin:16px 0 0;padding-left:22px;display:grid;gap:10px;color:var(--color-text-secondary)}
.docs-body ul{list-style:disc}
.docs-body ol{list-style:decimal}
.docs-body li{line-height:1.65}
.docs-body li>ul,.docs-body li>ol{margin-top:10px}
.docs-body strong{color:var(--color-text-primary);font-weight:600}
.docs-body em{font-style:italic}
.docs-body hr{margin:40px 0 0;border:0;border-top:1px solid var(--color-border)}
.docs-body code{font-family:var(--mono);font-size:.9em;padding:2px 6px;border-radius:6px;background:var(--color-page-secondary);border:1px solid var(--color-border-secondary);color:var(--color-text-primary);overflow-wrap:anywhere}
.docs-body pre{margin:20px 0 0;padding:18px 20px;overflow-x:auto;border:1px solid var(--color-border);border-radius:12px;background:var(--color-page-secondary);box-shadow:var(--shadow-card)}
.docs-body pre code{display:block;padding:0;border:0;background:none;font-size:14px;line-height:1.65;white-space:pre;overflow-wrap:normal;color:var(--color-text-primary)}
.docs-body .callout{margin:24px 0 0;padding:18px 22px;border:1px solid var(--color-border);border-left:3px solid var(--color-accent-500);border-radius:12px;background:var(--color-card);box-shadow:var(--shadow-card)}
.docs-body .callout>:first-child{margin-top:0}
.docs-body .callout p{font-size:15px;line-height:1.6}
.docs-body .callout-warning{border-left-color:var(--color-warning)}
.docs-body .callout-danger{border-left-color:var(--color-error)}
.docs-body .callout-success{border-left-color:var(--color-success)}
.docs-body ol.steps{margin:20px 0 0;padding-left:0;list-style:none;counter-reset:step;gap:18px}
.docs-body ol.steps>li{counter-increment:step;position:relative;padding-left:44px;min-height:28px;min-width:0}
.docs-body ol.steps>li::before{content:counter(step);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:999px;background:var(--color-accent-500);color:#fff;font:600 14px/28px Inter,system-ui,sans-serif;text-align:center;box-shadow:var(--shadow-button)}
.docs-body ol.steps ul,.docs-body ol.steps ol{padding-left:20px;gap:8px}
.docs-body ol.steps ol{list-style:decimal;counter-reset:none}
.docs-body ol.steps ol>li{counter-increment:none;padding-left:0;min-height:0}
.docs-body ol.steps ol>li::before{content:none}
.docs-body .requirements-table,.docs-body .table-wrap{margin:24px 0 0;overflow-x:auto;border:1px solid var(--color-border);border-radius:12px;background:var(--color-card);box-shadow:var(--shadow-card)}
.docs-body table{width:100%;border-collapse:collapse;font-size:15px}
.docs-body .requirements-table table,.docs-body .table-wrap table{margin:0}
.docs-body :not(.requirements-table):not(.table-wrap)>table{margin:24px 0 0;border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:var(--color-card)}
.docs-body th{padding:12px 16px;text-align:left;font-weight:600;color:var(--color-text-primary);background:var(--color-page-secondary);border-bottom:1px solid var(--color-border)}
.docs-body td{padding:12px 16px;text-align:left;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);vertical-align:top}
.docs-body tr:last-child td{border-bottom:0}
.docs-body img,.docs-body .docs-screenshot{display:block;max-width:100%;margin:24px 0 0;border-radius:14px;border:1px solid var(--color-border);box-shadow:var(--shadow-card)}
.docs-body .docs-cards,.docs-body .quick-links{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.docs-body .docs-card,.docs-body .quick-link{display:block;padding:18px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-card);box-shadow:var(--shadow-card);text-decoration:none;color:var(--color-text-primary)}
.docs-body .docs-card h3,.docs-body .quick-link h3{margin:0;font-size:16px;font-weight:600}
.docs-body .docs-card p{margin-top:6px;font-size:14px;line-height:1.5}
.docs-body .docs-card-icon{display:none}
.docs-body .quick-link{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:500}
.docs-body .quick-link svg{flex:none;color:var(--color-text-muted)}

/* Long content must not stretch its grid column. */
.docs-body{min-width:0}
.docs-body pre,.docs-body table,.docs-body img{max-width:100%}
.docs-body table{border-collapse:separate;border-spacing:0}
/* Wide tables scroll inside their own box rather than widening the page. */
.docs-body .table-scroll{max-width:100%;overflow-x:auto}
.docs-body table.requirements-table{display:table;margin:24px 0 0;border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:var(--color-card);box-shadow:var(--shadow-card)}
.docs-body th:first-child,.docs-body td:first-child{padding-left:18px}
.docs-body th:last-child,.docs-body td:last-child{padding-right:18px}

@media (max-width:1180px){
  .docs-layout{grid-template-columns:264px minmax(0,1fr) !important}
  .docs-layout docs-toc{display:none !important}
}

/* Both navigations collapse behind a labelled button on narrow screens.
   The buttons are hidden on wide screens, where both lists are always open. */
.nav-toggle{display:none;align-items:center;justify-content:space-between;gap:10px;width:100%;box-sizing:border-box;padding:11px 14px;font:500 15px/1.2 Inter,system-ui,sans-serif;color:var(--color-text-primary);background:var(--color-card);border:1px solid var(--color-border);border-radius:10px;box-shadow:var(--shadow-button);cursor:pointer}
.nav-toggle::after{content:'';width:8px;height:8px;flex:none;border-right:2px solid var(--color-text-secondary);border-bottom:2px solid var(--color-text-secondary);transform:rotate(45deg) translate(-2px,-2px)}
.nav-toggle[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}
.site-header-bar{position:relative}

@media (max-width:900px){
  .docs-layout{grid-template-columns:1fr !important}
  .docs-layout docs-nav{position:static !important;max-height:none !important;padding:16px 0 0 !important}
  .docs-layout docs-toc{display:none !important}

  .nav-toggle{display:flex}

  /* Documentation page list */
  docs-nav .nav-body{display:none;padding-top:16px}
  docs-nav.is-open .nav-body{display:block}

  /* Landing and features top navigation */
  .site-nav{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch !important;gap:4px !important;margin:0 !important;padding:12px 32px 20px;background:var(--color-page);border-bottom:1px solid var(--color-border);box-shadow:var(--shadow-card)}
  .site-nav.is-open{display:flex !important}
  .site-nav a{padding:11px 10px;border-radius:9px}
  .site-nav a:hover{background:var(--color-card-hover)}
  .site-header-bar{gap:12px !important}
  .site-header-bar .nav-toggle{width:auto;margin-right:auto}
  /* The call to action repeats immediately below in the hero, and the theme
     control keeps its icons, so the bar fits a 375px screen. */
  .site-header-bar > a.btn{display:none}
  docs-theme span{display:none}
  docs-theme button{padding:7px 9px !important}

  /* The documentation top bar keeps its links reachable instead of clipping */
  docs-topbar nav{overflow-x:auto;scrollbar-width:none}
  docs-topbar nav::-webkit-scrollbar{display:none}
}