/* ui/daas.css — owned by W22. Every colour is a token from styles.css :root.
   No literal hex. gate_css_vars / gate_css_shout exist for a reason and I am not the
   exception to them. Prefix dz- so nothing here can reach into W6's integrations page. */

/* The two halves of Integrations. Inbound / outbound. Same topic, two directions. */
.dz-halves { display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--line); }
.dz-half { background:transparent; border:0; border-bottom:2px solid transparent;
  padding:10px 18px; font-size:13.5px; font-weight:600; color:var(--muted);
  cursor:pointer; font-family:var(--font-body); transition:all var(--t-fast); }
.dz-half:hover { color:var(--ink); }
.dz-half-on { color:var(--accent); border-bottom-color:var(--accent); }

.dz-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:0 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.dz-hd h2 { font-family:var(--font-head, 'Sansation', 'Poppins', sans-serif); font-size:22px; line-height:1.2; margin:0 0 4px;
  color:var(--ink); font-weight:600; }
.dz-hd p { margin:0; color:var(--muted); font-size:13px; max-width:60ch; }
.dz-hd-r { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* R4, on the surface as well as in the payload. The demo badge is never subtle. */
.dz-demo { background:var(--warn-wash); color:var(--warn-ink); font-size:11px;
  font-weight:600; padding:4px 10px; border-radius:var(--r-pill); white-space:nowrap; }
/* R5. `.dz-region` is GONE. It styled a country string read from the serving box's config
   and rendered it, top of page, as a standing claim about the product. Deleting the CSS
   with the markup is deliberate: an orphan class is an invitation to re-add the element. */

/* ---- the two views of the Developer Centre --------------------------------------
   Resident (what they are buying) and Build integrations (how to build against it).

   THE CLASS IS `dz-vtab`, NOT `dz-tab`, AND THAT IS NOT A STYLE PREFERENCE.
   `.dz-tab` was ALREADY TAKEN, 170 lines below, by the snippet-language pills
   (Power BI / Python / curl). I wrote a second `.dz-tab` at the top of this same file.
   Both rules matched; the later one won; my active state vanished and both view tabs
   rendered as identical grey pills — you could not tell which view you were on. And it
   cut the other way too: my rule was restyling THEIR snippet pills.

   Every gate was green through this. `gate_daas` parses the JS and checks the CSS for
   literal hex; neither can see two rules with the same name agreeing to disagree. It
   took opening the page and reading the computed colour off both tabs — identical
   rgb(100,100,100) — to find it. A green gate is not a screen. */
.dz-vtabs { display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:18px; }
.dz-vtab { appearance:none; background:none; border:0; border-bottom:2px solid transparent;
  font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--muted);
  padding:9px 14px; cursor:pointer; transition:color var(--t-fast); }
.dz-vtab:hover { color:var(--ink); }
.dz-vtab--on { color:var(--accent); border-bottom-color:var(--accent); }
.dz-vtab:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }

/* ---- the Resident lead ----------------------------------------------------------
   The commercial half and the honest half, in that order. */
.dz-lead { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:18px 20px; margin-bottom:18px; }
.dz-lead p { margin:0 0 12px; color:var(--ink2); font-size:13.5px; line-height:1.6;
  max-width:82ch; }
.dz-lead p:last-child { margin-bottom:0; }
.dz-lead code { font-size:12px; background:var(--surface-2); padding:1px 5px;
  border-radius:var(--r-sm); border:1px solid var(--line); }
/* The "we have not built this" paragraph does not hide. It is the reason they believe
   the rest of the page. */
.dz-lead-hard { background:var(--warn-wash); color:var(--warn-ink) !important;
  border-left:3px solid var(--warn); padding:11px 14px; border-radius:var(--r-sm); }
.dz-lead-why { color:var(--muted-ink) !important; }

/* ---- the numbered workflow (Build integrations) ---------------------------------
   Xero's dev centre is a numbered list because a data team wants to know what to do
   FIRST, not what verbs exist. Andrew: "Developer is fine to be a workflow." */
.dz-flow { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px; margin-bottom:18px; }
.dz-step { display:flex; gap:11px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 15px; min-width:0; }
.dz-step-n { flex-shrink:0; width:22px; height:22px; border-radius:var(--r-pill);
  background:var(--accentSoft); color:var(--accent); font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.dz-step-b { min-width:0; }
/* `> b`, NOT `b`. The descendant selector caught every <b> in the step's prose too and
   gave each one display:block — so "revoked in <b>Admin & Security</b> — there is one
   key store" rendered as three stacked fragments instead of a sentence. The step TITLE
   is the direct child; the bolds inside <p> are emphasis and must stay inline. */
.dz-step-b > b { display:block; font-size:13px; color:var(--ink); margin-bottom:4px; }
.dz-step-b p { margin:0; font-size:12.5px; line-height:1.55; color:var(--muted-ink); }
.dz-step-b p b { color:var(--ink); }
.dz-step-b code { font-size:11.5px; background:var(--surface-2); padding:1px 4px;
  border-radius:var(--r-sm); border:1px solid var(--line); word-break:break-word; }

/* ---- the strip a data team checks BEFORE anything else --------------------------- */
.dz-ops { display:flex; gap:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden; margin-bottom:18px; }
.dz-op { flex:1; padding:11px 14px; border-right:1px solid var(--line); display:flex;
  flex-direction:column; gap:2px; text-decoration:none; }
.dz-op:last-child { border-right:0; }
.dz-op span { font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--faint); }
.dz-op b { font-size:13px; color:var(--ink); font-weight:600; }
.dz-op-a { cursor:pointer; }
.dz-op-a:hover { background:var(--hover); }
.dz-op-a b { color:var(--accent); }

/* ---- two columns: the menu, and the thing you DO ---------------------------------- */
.dz-body { display:grid; grid-template-columns:minmax(280px,340px) 1fr; gap:18px;
  align-items:start; }
@media (max-width:900px) { .dz-body { grid-template-columns:1fr; } }

.dz-grp { margin-bottom:18px; }
.dz-grp-h { display:flex; align-items:center; justify-content:space-between;
  margin:0 0 8px; }
.dz-grp-n { font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--faint); font-weight:600; }
.dz-tier { font-size:10px; padding:2px 8px; border-radius:var(--r-pill); font-weight:600; }
.dz-t-free { background:var(--pos-wash); color:var(--pos-ink); }
/* "Not built yet". Deliberately NOT the green of dz-t-free: a group whose every endpoint
   returns 501 must not wear the colour that means "you have this". */
.dz-t-planned { background:var(--warn-wash); color:var(--warn-ink); }
.dz-t-paid { background:var(--wash-lavender); color:var(--info-ink); }
.dz-t-open { background:var(--surface-2); color:var(--muted-ink);
  border:1px solid var(--line); }

.dz-ds { display:flex; flex-direction:column; gap:3px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 12px; margin-bottom:6px; cursor:pointer; transition:all var(--t-fast); }
.dz-ds:hover { border-color:var(--line2); background:var(--hover); }
.dz-ds.dz-on { border-color:var(--accent); box-shadow:var(--focus); background:var(--surface); }
.dz-ds.dz-off { opacity:.62; }
.dz-ds-n { font-size:13px; font-weight:600; color:var(--ink); display:flex;
  align-items:center; gap:6px; }
.dz-ds-l { font-size:11.5px; color:var(--muted); line-height:1.4; }
.dz-ds-p { font-size:10.5px; color:var(--faint); font-family:ui-monospace,monospace;
  margin-top:2px; }

.dz-pill { font-size:9.5px; font-weight:600; padding:2px 6px; border-radius:var(--r-pill); }
.dz-plan { background:var(--surface-2); color:var(--muted-ink); border:1px solid var(--line); }
.dz-open { background:var(--pos-wash); color:var(--pos-ink); }

/* ---- the panel: request, run, response -------------------------------------------- */
/* min-width:0 is load-bearing. A grid child defaults to min-width:auto, so the <pre> of
   JSON inside it refuses to shrink below its longest line and blows the whole page out
   sideways — which is exactly what it did the first time I looked at it in a browser.
   The gate cannot catch this. Only a browser can. */
.dz-panel { background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); padding:16px; min-height:280px; min-width:0; overflow:hidden;
  /* STICKY, and this is not decoration. The menu is 22 datasets long. Scroll to the
     solver at the bottom, click it, and the panel that updates is 900px above you — so
     the click LOOKS like it did nothing. "It's not interactive enough" is often really
     "it is interactive and I cannot see it happen." */
  position:sticky; top:16px; }
.dz-menu { min-width:0; }
.dz-req { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.dz-verb { font-size:11px; font-weight:700; padding:5px 9px; border-radius:var(--r-sm);
  font-family:ui-monospace,monospace; }
.dz-v-get { background:var(--pos-wash); color:var(--pos-ink); }
.dz-v-post { background:var(--wash-lavender); color:var(--info-ink); }
.dz-url { flex:1; font-family:ui-monospace,monospace; font-size:12.5px; color:var(--ink2);
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:6px 10px; overflow-x:auto; white-space:nowrap; }
.dz-run { background:var(--accent); color:var(--surface); border:0;
  border-radius:var(--r-sm); padding:7px 20px; font-size:13px; font-weight:600;
  cursor:pointer; transition:all var(--t-fast); }
.dz-run:hover { background:var(--accent-blue); }
.dz-run:disabled { opacity:.55; cursor:default; }

.dz-params { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.dz-params label { display:flex; flex-direction:column; gap:3px; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; }
.dz-params input, .dz-params select { border:1px solid var(--line2);
  border-radius:var(--r-sm); padding:6px 9px; font-size:13px; color:var(--ink);
  background:var(--surface); min-width:110px; font-family:var(--font-body); }
.dz-params input:focus, .dz-params select:focus { outline:0; border-color:var(--accent);
  box-shadow:var(--focus); }
.dz-hint { font-size:11.5px; color:var(--muted); background:var(--surface-2);
  border-left:2px solid var(--accent); padding:8px 10px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin-bottom:10px; line-height:1.5; }

/* The refusal is a FEATURE. It gets the loudest box on the page, because a client who
   watches us refuse to leak a competitor's position has just learned that we will not
   leak theirs either. That is the sale. */
.dz-refuse { background:var(--neg-wash); border:1px solid var(--neg);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:10px; }
.dz-refuse b { color:var(--neg-ink); font-size:13px; display:block; margin-bottom:4px; }
.dz-refuse p { margin:0 0 6px; font-size:12px; color:var(--ink2); line-height:1.5; }

/* R2 on the surface. If they are about to SUM() it, they see this first. */
.dz-cov { background:var(--warn-wash); border:1px solid var(--warn);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:10px; }
.dz-cov b { color:var(--warn-ink); font-size:13px; display:block; margin-bottom:4px; }
.dz-cov p { margin:0; font-size:12px; color:var(--ink2); line-height:1.5; }

/* The parent_id disclosure. Informational, not alarming — it is honesty, not a fault. */
.dz-prov { background:var(--info-wash); border:1px solid var(--accentSoft);
  border-radius:var(--r-sm); padding:12px 14px; margin-bottom:10px; }
.dz-prov b { color:var(--info-ink); }
.dz-prov p { margin:4px 0 0; font-size:12px; color:var(--ink2); line-height:1.55; }
.dz-prov code { font-family:ui-monospace,monospace; font-size:11px;
  background:var(--surface); padding:1px 5px; border-radius:4px;
  border:1px solid var(--line); }
.dz-prov-w { border-top:1px solid var(--accentSoft); padding-top:8px; margin-top:8px !important; }

.dz-blocked { background:var(--surface-2); border:1px dashed var(--line2);
  border-radius:var(--r-sm); padding:14px; }
.dz-blocked b { display:block; font-size:13px; color:var(--ink); margin-bottom:6px; }
.dz-blocked p { margin:0 0 6px; font-size:12px; color:var(--muted); line-height:1.55; }
.dz-blocked-w { color:var(--ink2) !important; font-weight:500; }

.dz-resp-bar { display:flex; align-items:center; gap:8px; margin:12px 0 0; }
.dz-ok { background:var(--pos-wash); color:var(--pos-ink); font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:var(--r-sm); font-family:ui-monospace,monospace; }
/* A refusal never wears a green chip. */
.dz-no { background:var(--neg-wash); color:var(--neg-ink); font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:var(--r-sm); font-family:ui-monospace,monospace; }
.dz-rows { font-size:11px; color:var(--faint); }
.dz-copy { margin-left:auto; background:var(--surface); border:1px solid var(--line2);
  border-radius:var(--r-sm); padding:5px 12px; font-size:11.5px; color:var(--ink2);
  cursor:pointer; font-weight:600; }
.dz-copy:hover { background:var(--hover); border-color:var(--accent); color:var(--accent); }

.dz-json { background:var(--accent-navy); color:var(--wash-mint);
  border-radius:var(--r-sm); padding:14px; font-family:ui-monospace,monospace;
  font-size:11.5px; line-height:1.6; overflow:auto; max-height:420px; margin:8px 0 0;
  white-space:pre; }

/* ---- snippets. One click to Power BI. -------------------------------------------- */
.dz-snip { margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.dz-snip-t { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.dz-tab { background:transparent; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:4px 12px; font-size:11.5px; color:var(--muted); cursor:pointer; font-weight:600; }
.dz-tab.dz-on { background:var(--accent); border-color:var(--accent); color:var(--surface); }
.dz-code { background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:12px; font-family:ui-monospace,monospace;
  font-size:11.5px; line-height:1.6; color:var(--ink2); overflow-x:auto; margin:0;
  white-space:pre; }
.dz-hide { display:none; }

/* ---- keys. We LINK to W10's console. There is no "New key" button here, ever. ----- */
.dz-keys { display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-top:18px; padding:13px 16px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md); }
.dz-keys-l { display:flex; flex-direction:column; gap:2px; }
.dz-keys-l b { font-size:13px; color:var(--ink); }
.dz-keys-l span { font-size:11.5px; color:var(--muted); }
.dz-keys-b { background:var(--surface); border:1px solid var(--accent);
  color:var(--accent); border-radius:var(--r-sm); padding:7px 16px; font-size:12.5px;
  font-weight:600; cursor:pointer; }
.dz-keys-b:hover { background:var(--accent); color:var(--surface); }

.dz-empty { display:flex; flex-direction:column; gap:4px; align-items:center;
  justify-content:center; min-height:220px; text-align:center; }
.dz-empty b { font-size:14px; color:var(--ink); }
.dz-empty span { font-size:12.5px; color:var(--muted); }
.dz-load { padding:28px; text-align:center; color:var(--muted); font-size:12.5px; }