/* ==========================================================================
   demo-shell.css - the demo's own chrome.

   Three things and nothing else:
     1. .dz-chooser   the full-screen entry screen
     2. .dz-bar       the strip pinned to the bottom of the sandbox
     3. .dz-host      the empty mount point the presentation and the
                      tutorial draw into

   Every colour is a var() from ../app-odoo/css/tokens.css, so this file
   follows the theme and the organisation's own colour without knowing
   either. It invents no colour and it redefines no application selector:
   the only application rule touched is #o-root, and only to keep the
   bottom strip from covering the last row of a screen.

   Prefix: dz-. Nothing else in the product uses it.
   ========================================================================== */

:root {
  --dz-bar-h: 0px;
  --dz-max: 1000px;
}

/* --------------------------------------------------------------------------
   0.  THE COVER
   demo-boot.js puts this class on <html> before the application scripts
   run, so a visitor who has not chosen yet never sees the app paint and
   then get covered. The chooser takes it off when it hands over.
   -------------------------------------------------------------------------- */
html.dz-cover #o-root { visibility: hidden; }

/* --------------------------------------------------------------------------
   1.  SHARED ATOMS
   -------------------------------------------------------------------------- */
.dz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dz-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex: none;
}

.dz-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-xs); color: var(--ink-2);
  letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   2.  THE CHOOSER
   -------------------------------------------------------------------------- */
.dz-chooser {
  position: fixed; inset: 0; z-index: 900;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs); line-height: var(--lh);
  overflow: auto;
}

/* the top strip is the application's own bar, at its own height and fill,
   so the chooser reads as the front door of this product and not as a
   separate marketing page */
.dz-top {
  display: flex; align-items: center; gap: 10px;
  height: var(--nav-h); flex: none;
  padding: 0 var(--gutter);
  background: var(--brand); color: var(--nav-ink-on);
  border-bottom: 1px solid var(--brand-dk);
}
/* The product mark. Its three colours are pinned rather than themed - an
   identity that changes colour is not an identity - and they are the same
   three values shell.css pins under .od-nav .brandtile .mark. They are
   restated here and not linked, because that rule is scoped to the app bar
   and this is the demo's own strip. */
.dz-top .mark {
  display: inline-flex; width: 22px; height: 22px; flex: none;
  border-radius: 5px; overflow: hidden;
}
.dz-top .mark > svg { display: block; width: 100%; height: 100%; }
.dz-top .mark .m-bg { fill: #0f2340; }
.dz-top .mark .m-fg { stroke: #e7edf6; }
.dz-top .mark .m-ac { stroke: #3eb87a; }
.dz-top-name { font-weight: 600; letter-spacing: .01em; }
.dz-top-sep { flex: 1 1 auto; }

.dz-top button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 8px;
  border: 1px solid transparent; border-radius: var(--r);
  background: transparent; color: var(--nav-ink);
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
}
.dz-top button:hover { background: var(--nav-hover); color: var(--nav-ink-on); }
.dz-top button:focus-visible {
  outline: 2px solid var(--focus-on-brand); outline-offset: -3px;
}
.dz-top button svg { width: 16px; height: 16px; }

.dz-wrap {
  width: 100%; max-width: var(--dz-max);
  margin: 0 auto; padding: 40px var(--gutter) 48px;
  flex: 1 0 auto;
}

.dz-h1 {
  margin: 10px 0 8px;
  font-size: var(--fs-title); font-weight: 600; line-height: 1.25;
  letter-spacing: -.01em;
}
.dz-sub {
  margin: 0 0 4px; max-width: 64ch;
  color: var(--ink-2);
}
.dz-facts {
  margin: 6px 0 0; max-width: 64ch;
  color: var(--ink-3); font-size: var(--fs-sm);
}

.dz-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 28px 0 0;
}

.dz-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px; text-align: left;
  background: var(--view); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-1);
  font: inherit; cursor: pointer;
  transition: border-color var(--t-enter) ease, box-shadow var(--t-enter) ease;
}
.dz-card:hover:not([aria-disabled="true"]) {
  border-color: var(--brand);
  box-shadow: var(--shadow-2);
}
.dz-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dz-card[aria-disabled="true"] { cursor: default; opacity: .6; }

.dz-card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: none;
  border-radius: var(--r);
  background: var(--action-soft); color: var(--action);
}
.dz-card-ico svg { width: 18px; height: 18px; }

.dz-card-t { font-size: var(--fs-h5); font-weight: 600; }
.dz-card-d { color: var(--ink-2); }
.dz-card-m {
  margin-top: auto; padding-top: 6px;
  color: var(--ink-3); font-size: var(--fs-sm);
}

.dz-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 5px 10px;
  border-radius: var(--r); border: 1px solid var(--line);
  background: transparent; color: var(--ink);
  font-size: var(--fs); font-weight: 500;
  align-self: flex-start;
}
.dz-card-cta svg { width: 14px; height: 14px; }
.dz-card--primary .dz-card-cta {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.dz-card--primary:hover .dz-card-cta { background: var(--brand-dk); border-color: var(--brand-dk); }
.dz-card:hover:not(.dz-card--primary):not([aria-disabled="true"]) .dz-card-cta {
  background: var(--g200);
}

.dz-tag {
  display: inline-block; align-self: flex-start;
  padding: 1px 6px; border-radius: 10px;
  background: var(--action-soft); color: var(--action);
  font-size: var(--fs-xs); font-weight: 600;
}

.dz-foot {
  margin: 26px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-3); font-size: var(--fs-sm);
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
}
.dz-foot p { margin: 0; }
.dz-foot .dz-link {
  background: none; border: 0; padding: 0;
  color: var(--action); font: inherit; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.dz-foot .dz-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3.  THE SANDBOX BAR
   -------------------------------------------------------------------------- */
.dz-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  background: var(--view); color: var(--ink);
  border-top: 1px solid var(--line);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, .10);
  font-family: var(--font-ui); font-size: var(--fs-sm); line-height: var(--lh);
}
.dz-bar[hidden] { display: none; }

.dz-bar-in {
  display: flex; align-items: center; gap: 12px;
  max-width: 1440px; margin: 0 auto;
  padding: 8px var(--gutter);
}
.dz-bar-note { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dz-bar-note strong { font-weight: 600; }
.dz-bar-txt {
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dz-bar-acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.dz-bbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--r);
  background: transparent; color: var(--ink);
  font: inherit; font-weight: 500; cursor: pointer;
}
.dz-bbtn:hover { background: var(--g200); }
.dz-bbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.dz-bbtn svg { width: 14px; height: 14px; }
.dz-bbtn--primary {
  background: var(--brand); border-color: var(--brand); color: var(--brand-ink);
}
.dz-bbtn--primary:hover { background: var(--brand-dk); border-color: var(--brand-dk); }

/* the strip keeps its own height out of the application's frame, so the
   last row of a screen is never underneath it */
html.dz-bar-on body { padding-bottom: var(--dz-bar-h); }
html.dz-bar-on #o-root {
  min-height: calc(100vh - var(--dz-bar-h));
  min-height: calc(100dvh - var(--dz-bar-h));
}

/* --------------------------------------------------------------------------
   4.  THE HOST
   The presentation and the tutorial mount here. It is empty and out of the
   way until one of them is running; the shell shows it and hides it.
   -------------------------------------------------------------------------- */
.dz-host { position: fixed; inset: 0; z-index: 880; }
.dz-host[hidden] { display: none; }

/* --------------------------------------------------------------------------
   5.  NARROW
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .dz-cards { grid-template-columns: minmax(0, 1fr); }
  .dz-wrap { padding-top: 28px; }
  .dz-card-m { margin-top: 0; }
}

@media (max-width: 640px) {
  .dz-bar-txt { display: none; }
  .dz-bar-in { padding: 8px 10px; gap: 8px; }
  .dz-bar-acts { gap: 4px; }
  .dz-bbtn { padding: 5px 8px; }
  .dz-bbtn .dz-full { display: none; }
  .dz-h1 { font-size: 21px; }
  .dz-top-name { font-size: var(--fs-sm); }
}
@media (min-width: 641px) {
  .dz-bbtn .dz-short { display: none; }
}

/* --------------------------------------------------------------------------
   6.  MOTION
   -------------------------------------------------------------------------- */
.dz-anim { animation: dz-in var(--t-enter) ease both; }
@keyframes dz-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-anim { animation: none; }
  .dz-card { transition: none; }
}

/* --------------------------------------------------------------------------
   7.  PRINT
   A printed certification carries no demo chrome.
   -------------------------------------------------------------------------- */
@media print {
  .dz-chooser, .dz-bar, .dz-host { display: none !important; }
  html.dz-bar-on body { padding-bottom: 0; }
}