/* ============================================================
   CloudFiles Design System — extracted from Figma Design Handbook
   (Website V3.0, node 188-15046). Single source of truth for all
   three prototype options.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---- Primary (actions only) ---- */
  --blue: #3d73d1;
  --blue-100: #dfe6f6;
  --blue-200: #b6c9f3;
  --blue-400: #6d9dec;
  --blue-700: #2d61c1;
  --blue-900: #2a4f9e;

  /* ---- Inks (text hierarchy) ---- */
  --ink: #222222;
  --ink-2: #3a3a3a;
  --ink-3: #6b6b6b;
  --ink-4: #9f9f9f;
  --ink-5: #d9d9d9;

  /* ---- Canvas (depth without borders) ---- */
  --canvas: #ffffff;
  --canvas-2: #f3f3f3;
  --canvas-3: #ececec;
  --dark-surface: #404054;
  --dark-surface-2: #343446;

  /* ---- Semantic (status only) ---- */
  --teal: #00b89c;
  --teal-100: #d3f6f1;
  --teal-200: #9dece0;
  --teal-700: #208c7b;
  --red: #e84040;
  --red-100: #f8ecec;
  --red-200: #f09b9b;
  --amber: #e6af55;
  --amber-100: #fef4e3;
  --amber-200: #f5d7a5;
  --amber-900: #a0742b;

  /* ---- Borders ---- */
  --dash: #bcbcbc;
  --dash-teal: #00b89c;
  --hairline: #e5e5e5;

  /* ---- Navbar (Figma Website V3.0, node 636:4249) ---- */
  --nav-accent: #2458b1;        /* active product-tab text */
  --nav-cta: #1f368e;           /* "Go to website" navy text */
  --nav-active-fill: #f6f8fb;   /* active tab fill */
  --nav-border: #d9d9d9;        /* section hairlines + bar bottom + ⌘K badge */
  --nav-active-border: #dddddd; /* active tab border */
  --search-border: #dddbd8;     /* search input border */
  --btn-border: #f1f3fa;        /* CTA border */

  /* ---- Docs sidebar (Figma node 636:3741) ---- */
  --sidebar-border: #d9d9d9;    /* right rail hairline (matches --nav-border) */
  --sidebar-hover: #f6f8fb;     /* active-leaf pill fill (matches --nav-active-fill) */

  /* ---- Homepage (Figma Homepage-mainscreen, node 636:4272) ---- */
  --home-bg: #f6f6f6;           /* full-bleed textured hero + cards background */
  --card-border: #9f9f9f;       /* homepage card hairline (upper/footer border) */
  --cta-hover: var(--sidebar-hover);  /* shared CTA / nav-card hover fill (light-blue #f6f8fb, matches the active-leaf pill fill) */

  /* ---- Article main + right rail (Figma nodes 636:3087 / 636:6003) ---- */
  --article-bg: #f6f6f6;        /* article .main + right-rail background */
  --brand-blue: #3d73d1;        /* resting brand blue (prose links, callout/chip text) */
  /* active/hover + TOC pill reuse --nav-accent (#2458b1) */
  --callout-bg: #eef3fb;        /* info callout fill */
  --callout-border: #c7d9f2;    /* info callout border */
  --chip-bg: #ecf0f7;           /* eyebrow kind-chip fill */
  --step-badge: #404054;        /* numbered-step circle badge */
  --rule: #9f9f9f;              /* solid header divider */

  /* ---- Spacing (4px grid) ---- */
  --sp-2: 2px;  --sp-4: 4px;   --sp-8: 8px;   --sp-12: 12px;
  --sp-16: 16px; --sp-20: 20px; --sp-24: 24px; --sp-32: 32px; --sp-48: 48px;
  --sp-64: 64px; --sp-80: 80px; --sp-120: 120px;

  /* ---- Type ---- */
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --radius: 8px;
  --radius-sm: 5px;
  --radius-xs: 4px;
}

/* ============ Reset & base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--ink-2);
  background-color: #fff;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font-family: var(--sans); cursor: pointer; }
::selection { background: var(--blue-100); }

/* ============ Type helpers ============ */
.display-xl { font: 500 56px/1.0 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.display-lg { font: 500 44px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.heading-xl { font: 500 32px/1.05 var(--serif); letter-spacing: -.016em; color: var(--ink); }
.heading-lg { font: 500 24px/1.15 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.heading-md { font: 500 20px/1.3 var(--serif); color: var(--ink); }
.heading-sm { font: 500 17px/1.3 var(--serif); color: var(--ink); }
.em-accent { font-style: italic; color: var(--teal-700); }
.em-blue { font-style: italic; color: var(--blue-700); }

.label {
  font: 600 11px/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.body-sm { font-size: 14px; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  font: 500 14px/1 var(--sans);
  padding: 11px 18px; border-radius: var(--radius);
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
  text-decoration: none !important;
}
.btn-filled { background: var(--blue); color: #fff; }
.btn-filled:hover { background: var(--blue-700); }
.btn-tonal { background: var(--blue-100); color: var(--blue-700); }
.btn-tonal:hover { background: var(--blue-200); }
.btn-outline { background: var(--canvas); color: var(--ink-2); border-color: var(--ink-5); }
.btn-outline:hover { background: var(--canvas-3); }
.btn-ghost { background: transparent; color: var(--blue-700); }
.btn-ghost:hover { background: var(--blue-100); }

/* label-style arrow link (the website "LEARN MORE →" pattern) */
.linklabel {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-700); text-decoration: none !important;
  padding: var(--sp-12) 0; transition: gap .15s;
}
.linklabel:hover { gap: 10px; }
.linklabel .arr { font-family: var(--sans); }

/* ============ Status badges ============ */
.badge {
  display: inline-flex; align-items: center;
  font: 500 12px/1 var(--sans); padding: 4px 10px; border-radius: 99px;
  white-space: nowrap;
}
.badge-blue  { background: var(--blue-100); color: var(--blue-900); }
.badge-teal  { background: var(--teal-100); color: var(--teal-700); }
.badge-amber { background: var(--amber-100); color: var(--amber-900); }
.badge-red   { background: var(--red-100); color: #b13232; }
.badge-gray  { background: var(--canvas-3); color: var(--ink-3); }
.badge-dark  { background: var(--dark-surface); color: #fff; }

/* method badges for API */
.badge-get    { background: var(--blue-100); color: var(--blue-900); font-family: var(--mono); font-size: 11px; }
.badge-post   { background: var(--teal-100); color: var(--teal-700); font-family: var(--mono); font-size: 11px; }
.badge-delete { background: var(--red-100); color: #b13232; font-family: var(--mono); font-size: 11px; }
.badge-put    { background: var(--amber-100); color: var(--amber-900); font-family: var(--mono); font-size: 11px; }

/* ============ Alerts / callouts ============ */
.alert {
  display: flex; gap: var(--sp-12); align-items: flex-start;
  padding: var(--sp-16) var(--sp-16);
  border-radius: var(--radius); border: 1px solid;
  margin: var(--sp-24) 0; font-size: 14px;
}
.alert .alert-title { font: 500 16px/1.3 var(--serif); display: block; margin-bottom: 2px; }
/* info callout — Figma frame 636:3087 */
.alert-info    { background: var(--callout-bg); border-color: var(--callout-border); border-radius: 6px; color: #222; }
.alert-info    .ph { color: #3D73D1; }
.alert-info    .alert-title { color: var(--brand-blue); font: 500 18px/1.3 var(--serif); }
.alert-success { background: var(--teal-100); border-color: var(--teal-200); }
.alert-success .ph { color: #208C7B; }
.alert-success .alert-title { color: var(--teal-700); }
.alert-warning { background: var(--amber-100); border-color: var(--amber-200); }
.alert-warning .ph { color: #A0742B; }
.alert-warning .alert-title { color: var(--amber-900); }
.alert-error   { background: var(--red-100); border-color: var(--red-200); }
.alert-error   .ph { color: #E84040; }
.alert-error   .alert-title { color: #E84040; }
/* icon wrapper: hold the 16px inline SVG, top-aligned with the first title line.
   Per-variant .ph color rules above set the color; the SVG fill=currentColor inherits it. */
.alert .ph { flex: 0 0 16px; display: block; margin-top: 3px; }
.alert .ph svg { display: block; width: 16px; height: 16px; }
/* Rich callout bodies (WS4): callouts can now hold multiple paragraphs, lists, inline
   images and code — restored from Archbee's callout-v2 structure. The global `* { margin:0 }`
   reset zeroes block spacing, so scope vertical rhythm + media sizing to the callout body here.
   (The callout's inner content div is `.alert > div`; title is its first child.) */
.alert > div { min-width: 0; overflow-wrap: break-word; }
.alert > div > * + * { margin-top: var(--sp-12); }
.alert > div > .alert-title + * { margin-top: var(--sp-8); }
.alert p { color: inherit; }
.alert ul, .alert ol { padding-left: 1.25em; list-style-position: outside; }
.alert li { margin: 4px 0; }
.alert li > ul, .alert li > ol { margin-top: 4px; }
.alert img { display: block; max-width: 100%; height: auto; border-radius: 6px; margin: var(--sp-12) 0; }
.alert pre.codeblock { margin: var(--sp-12) 0; font-size: 12.5px; }

/* ============ Tabs ============ */
.tabs-underline { display: flex; gap: var(--sp-24); border-bottom: 1px solid var(--hairline); }
.tabs-underline .tab {
  background: none; border: none; padding: var(--sp-12) 2px; font: 500 14px var(--sans);
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs-underline .tab:hover { color: var(--ink); }
.tabs-underline .tab.active { color: var(--ink); border-bottom-color: var(--blue); }

.tabs-segment {
  display: inline-flex; background: var(--canvas-3); border-radius: var(--radius);
  padding: 3px; gap: 2px;
}
.tabs-segment .tab {
  background: none; border: none; border-radius: var(--radius-sm);
  padding: 7px 14px; font: 500 13px var(--sans); color: var(--ink-3);
}
.tabs-segment .tab:hover { color: var(--ink); }
.tabs-segment .tab.active { background: var(--canvas); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.07); }

/* ============ Cards ============ */
.card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius);
}
.card-dashed { background: var(--canvas); border: 1px dashed var(--dash); }
.card-dashed-teal { background: var(--canvas); border: 1px dashed var(--dash-teal); }

/* ============ Tables ============ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; margin: var(--sp-16) 0; }
.table th {
  text-align: left; font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4); padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--ink-5);
}
.table td { padding: var(--sp-12); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table code { font: 500 12.5px var(--mono); background: var(--canvas-2); padding: 2px 6px; border-radius: 4px; color: var(--ink); }

/* ============ Code ============ */
.codeblock {
  background: var(--dark-surface); color: #e7e7f0;
  border-radius: var(--radius); font: 400 13px/1.6 var(--mono);
  padding: var(--sp-16) var(--sp-16); overflow-x: auto; margin: var(--sp-16) 0;
}
.codeblock .c-key { color: #9dece0; }
.codeblock .c-str { color: #f5d7a5; }
.codeblock .c-com { color: #9090a8; font-style: italic; }
.codeblock .c-fn  { color: #b6c9f3; }
code.inline { font: 500 13px var(--mono); background: var(--canvas-3); padding: 2px 6px; border-radius: 4px; color: var(--ink); }

/* ============ Inputs ============ */
.input {
  width: 100%; font: 400 14px var(--sans); color: var(--ink);
  padding: 11px 14px; border: 1px solid var(--ink-5); border-radius: var(--radius);
  background: var(--canvas); outline: none; transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--ink-4); }
.input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-100); }

/* ============ Tooltip-ish kbd ============ */
.kbd {
  font: 500 11px var(--mono); background: var(--canvas); border: 1px solid var(--ink-5);
  border-bottom-width: 2px; border-radius: 4px; padding: 2px 6px; color: var(--ink-3);
}

/* ============ Progress ============ */
.progress { height: 6px; background: var(--canvas-3); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: 3px; background: var(--teal); }

/* ============ Doc prose (article body) — Figma frame 636:3087 ============ */
/* 64px side gutters; ~776px text measure (was 720). */
.prose { max-width: calc(776px + 2 * var(--sp-64)); padding: 0 var(--sp-64); }
.prose > * + * { margin-top: var(--sp-16); }
.prose h1 { font: 500 32px/31.2px var(--serif); letter-spacing: -.52px; color: var(--ink); margin-top: 18px; }
.prose h2 { font: 500 24px/1.2 var(--serif); letter-spacing: -.22px; color: var(--ink); margin-top: var(--sp-48); }
.prose h3 { font: 500 18px/1.3 var(--serif); color: var(--ink); margin-top: var(--sp-32); }
/* anchor jumps clear the 60px sticky navbar (+breathing room) */
.prose h2, .prose h3 { scroll-margin-top: 76px; }
.prose p  { color: var(--ink-2); }
.prose a  { color: var(--brand-blue); }
/* The hero intro is hoisted to .article-sub (see atlas.css); body paragraphs all
   render uniformly (DM Sans 400 15px, Ink 2) — no special first-child lead. */
.prose li { margin: var(--sp-12) 0; color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 1em; list-style-position: outside; }
.prose hr { border: none; border-top: 1px dashed var(--dash); margin: var(--sp-32) 0; }
.prose figure { margin: var(--sp-24) 0; }
.prose figcaption { font-size: 13px; color: var(--ink-4); margin-top: var(--sp-8); text-align: left; }

/* ---- Content vertical rhythm (article body) ----
   Blocks render as .article-body > [data-blk] wrappers (each a bare div, no
   border/padding), so inter-block breathing room lives on the wrappers. Because
   the wrapper has no border/padding, its top margin COLLAPSES with the top margin
   of its first child — so a block that starts with an <h2>/<h3>/.label/.step/figure
   keeps its own larger gap (the max wins) and never doubles. Plain paragraphs and
   lists, which had none, get a comfortable gap. This is our own rhythm, not a
   pixel-match of the old site. */
.prose .article-body > [data-blk] + [data-blk] { margin-top: var(--sp-20); }
/* Within one block: lead text followed by a hoisted <ul>/<ol> (a `p` block whose
   html carries a list) renders as sibling <p> + list; and multi-element blocks
   (label + table, etc.) — give their stacked pieces the same rhythm. Direct
   children only, so table rows / card internals / step contents are untouched. */
.prose .article-body [data-blk] > * + * { margin-top: var(--sp-16); }

/* fake screenshot/video placeholders so prototypes read honestly */
.media-ph {
  border: 1px dashed var(--dash); border-radius: var(--radius);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.018) 14px 28px),
    var(--canvas-2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-8); color: var(--ink-4); font-size: 13px; min-height: 220px;
}
.media-ph .ph-icon { font-size: 26px; color: var(--ink-5); }
.media-ph.is-video { background:
    radial-gradient(circle at center, rgba(64,64,84,.05), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(0,0,0,.018) 14px 28px),
    var(--canvas-2); }

/* steps — Figma frame 636:3087 */
.step { display: flex; gap: 10px; margin: var(--sp-24) 0; }
.step-num {
  flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--step-badge); color: #fff; font: 400 10px/20px var(--sans); text-align: center;
}
.step-body { flex: 1; min-width: 0; font: 400 15px/1.55 var(--sans); color: var(--ink-2); }
.step-body > .step-title { font: 500 18px/1.3 var(--serif); color: #222; margin-bottom: var(--sp-4); }

/* internal doc link chip (mention-doc) */
.docchip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--canvas-2); border: 1px solid var(--hairline); border-radius: 6px;
  padding: 2px 8px 2px 6px; font-size: 13.5px; color: var(--blue-700);
  text-decoration: none !important; white-space: nowrap;
}
.docchip:hover { border-color: var(--blue-200); background: var(--blue-100); }

/* ============ Scrollbars (subtle) ============ */
.thin-scroll { scrollbar-width: thin; scrollbar-color: var(--ink-5) transparent; }
.thin-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.thin-scroll::-webkit-scrollbar-thumb { background: var(--ink-5); border-radius: 4px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============ Shared modal search (⌘K) ============ */
.cmdk-overlay {
  position: fixed; inset: 0; background: rgba(34,34,34,.4); z-index: 200;
  display: none; align-items: flex-start; justify-content: center; padding-top: 12vh;
  backdrop-filter: blur(2px);
}
.cmdk-overlay.open { display: flex; }
.cmdk {
  width: min(640px, 92vw); background: var(--canvas); border-radius: 12px;
  box-shadow: 0 24px 80px rgba(34,34,52,.35); overflow: hidden;
  animation: cmdk-in .18s ease-out;
}
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }
.cmdk input {
  width: 100%; border: none; outline: none; font: 400 17px var(--sans);
  padding: 18px 20px; border-bottom: 1px solid var(--hairline); color: var(--ink);
}
.cmdk input::placeholder { color: var(--ink-4); }
.cmdk-chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--hairline);
}
.cmdk-chip {
  border: 1px solid var(--ink-5); background: var(--canvas); color: var(--ink-3);
  font: 500 12px var(--sans); padding: 3px 10px; border-radius: 999px; cursor: pointer;
}
.cmdk-chip:hover { border-color: var(--blue-200); background: var(--blue-100); }
.cmdk-chip.active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.cmdk-results { max-height: 46vh; overflow-y: auto; padding: var(--sp-8); }
.cmdk-section { padding: var(--sp-12) var(--sp-12) var(--sp-4); }
.cmdk-status { font-size: 13px; }
.cmdk-err { color: var(--blue-700); cursor: pointer; }
.cmdk-item {
  display: flex; align-items: flex-start; gap: var(--sp-12); padding: 10px 12px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; color: var(--ink-2);
}
.cmdk-item:hover, .cmdk-item.sel { background: var(--blue-100); }
.cmdk-item .ci-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmdk-item .ci-title { overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .ci-sec { color: var(--ink-4); font-weight: 400; }
.cmdk-item .cmdk-snip {
  font-size: 12px; line-height: 1.4; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmdk-item .cmdk-snip b { color: var(--blue-700); font-weight: 600; }
.cmdk-item .crumb { color: var(--ink-4); font-size: 12px; margin-left: auto; white-space: nowrap; padding-top: 1px; }
.cmdk-foot {
  display: flex; gap: var(--sp-16); padding: 10px 16px; border-top: 1px solid var(--hairline);
  font-size: 12px; color: var(--ink-4); background: var(--canvas-2);
}

/* ============ Utility ============ */
.flex { display: flex; } .aic { align-items: center; } .jcb { justify-content: space-between; }
.gap-8 { gap: var(--sp-8); } .gap-12 { gap: var(--sp-12); } .gap-16 { gap: var(--sp-16); } .gap-24 { gap: var(--sp-24); }
.mt-8 { margin-top: var(--sp-8); } .mt-16 { margin-top: var(--sp-16); } .mt-24 { margin-top: var(--sp-24); }
.mt-32 { margin-top: var(--sp-32); } .mt-48 { margin-top: var(--sp-48); } .mt-64 { margin-top: var(--sp-64); }
.hide { display: none !important; }