/* ══════════════════════════════════════════════════════════════════════════
   The davisweb card that sits on top of a panel demo.

   Everything else on these pages is the salon's world — warm neutrals, its
   own type, its own chrome. This is us, talking over it, and it is supposed
   to look like a different thing: the site's own dark ground, carmine and
   serif, so nobody mistakes it for part of the fictional product.

   Docked bottom-right, and the "izdomāts uzņēmums" badge is pushed from the
   bottom centre to the bottom left to make room — the two live along the same
   edge and never overlap, because everything a panel has to show sits above
   them. Top-right was tried first and covered the stats and the transcript,
   which is the part the card is asking you to look at. Dismissible for the
   same reason the badge is: a screenshot has to be possible.

   Tokens are repeated rather than imported — a panel page loads its own
   stylesheet and not site.css, and pulling 67 KB of site CSS onto a demo to
   style one card would cost more than it is worth.
   ══════════════════════════════════════════════════════════════════════ */

.dwx{
  --dwx-ink:#FBFAF8;
  --dwx-dim:rgba(242,241,238,.66);
  --dwx-carmine:#E4636C;
  --dwx-rule:rgba(242,241,238,.14);
  /* The site's own faces. This card is davisweb speaking over somebody
     else's screen, so it has to be set in davisweb's type — the panel pages
     do not load site.css, so the stacks are repeated here. */
  --dwx-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --dwx-serif:'Source Serif 4',Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;
  --dwx-sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,
             "Helvetica Neue",Arial,sans-serif;

  position:fixed;bottom:1rem;right:1rem;z-index:95;
  width:min(23rem,calc(100vw - 2rem));
  box-sizing:border-box;
  padding:1rem 1.1rem 1.05rem;
  border:1px solid var(--dwx-rule);border-radius:12px;
  background:rgba(14,16,19,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.75);
  color:var(--dwx-ink);text-align:left;
  /* No entrance animation, on purpose. On /demo this page loads inside an
     iframe that stays hidden until its category is picked, and a hidden
     iframe's animation timeline is frozen — measured here as playState
     "running" stuck at currentTime 0, which holds the element at the
     keyframe's opacity:0 indefinitely. A card whose entire job is to be read
     must not be able to arrive invisible, so it is simply drawn. The only
     transition left is the dismissal, which a person triggers. */
}
.dwx *{box-sizing:border-box}

.dwx-top{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.dwx-mark{width:.95rem;height:.95rem;flex:none;color:var(--dwx-carmine)}
.dwx-brand{
  font-family:var(--dwx-mono);font-size:.7rem;font-weight:700;letter-spacing:-.02em;
  color:var(--dwx-ink);
}
.dwx-brand i{font-style:normal;color:var(--dwx-carmine)}
.dwx-x{
  margin-left:auto;width:1.4rem;height:1.4rem;flex:none;
  border:0;border-radius:50%;cursor:pointer;line-height:1;font-size:.9rem;
  background:rgba(242,241,238,.1);color:var(--dwx-dim);
}
.dwx-x:hover{background:rgba(242,241,238,.2);color:var(--dwx-ink)}

.dwx h2{
  font-family:var(--dwx-serif);font-weight:400;font-size:1.08rem;line-height:1.24;
  letter-spacing:-.015em;margin:0 0 .5rem;color:var(--dwx-ink);
}
.dwx h2 em{font-style:italic;color:var(--dwx-carmine)}
.dwx p{
  font-family:var(--dwx-sans);font-size:.82rem;line-height:1.6;
  color:var(--dwx-dim);margin:0;
}
.dwx p + p{margin-top:.5rem}
.dwx-go{
  display:inline-block;margin-top:.85rem;padding-top:.7rem;
  border-top:1px solid var(--dwx-rule);width:100%;
  font-family:var(--dwx-mono);font-size:.72rem;letter-spacing:.05em;
  color:var(--dwx-carmine);text-decoration:none;
}
.dwx-go:hover{color:var(--dwx-ink)}

.dwx.is-gone{opacity:0;transform:translateY(.6rem);pointer-events:none;
  animation:none;transition:opacity .3s,transform .3s}

/* The five panels each name their demo badge after themselves. Moving it out
   of the bottom centre is the price of docking the card on the same edge, and
   it has to be done here rather than in five stylesheets — this file is the
   only one that knows the card exists. Loaded after the panel's own CSS, so
   these win at equal specificity. */
.za-note,.zb-note,.pa-note,.pb-note,.kl-note,.demo-note{left:1rem;transform:none}
.za-note.is-gone,.zb-note.is-gone,.pa-note.is-gone,
.pb-note.is-gone,.kl-note.is-gone,.demo-note.is-gone{transform:translateY(1rem)}

/* Inside the /demo frame the panel is only about 430px tall, so the card is
   set tighter rather than hidden — that frame is exactly where a visitor is
   least sure what he is looking at. */
@media (max-height:34rem){
  .dwx{padding:.8rem .9rem .85rem;width:min(20rem,calc(100vw - 2rem))}
  .dwx h2{font-size:.95rem}
  .dwx p{font-size:.78rem;line-height:1.5}
  .dwx p + p{margin-top:.35rem}
}
/* Below roughly 46rem the card (23rem) and the badge (~20rem) can no longer
   sit side by side along the bottom edge without touching, so the card takes
   the full width and stands above the badge instead. Measured, not guessed:
   at 635px the two overlapped by 93px. */
@media (max-width:46rem){
  .dwx{left:1rem;right:1rem;width:auto;bottom:4.4rem}
}