/* Dirtcon — THE SHARED DOCK STRUCTURE. Loaded by concepts 1, 2 and 3.
   Skin a concept by setting these tokens in its OWN stylesheet, nothing else:

   :root{
     --dk-sheet: rgba(12,22,34,.9);   the dock ground
     --dk-line: rgba(255,255,255,.14);
     --dk-ink: #93A2B2;               resting label
     --dk-ink-on: #EAF2F8;            active label
     --dk-accent: #37A8E0;            the chat tile fill
     --dk-accent-ink: #08131E;        text on the chat tile
     --dk-pill: rgba(255,255,255,.09);
     --dk-radius: 6px;
     --dk-font: 'Public Sans', system-ui, sans-serif;
   }

   Phone standard: every tile is 46px tall, no label under 12px. */
.dk{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;justify-content:center;
  padding:0 12px 12px;pointer-events:none;transform:translateY(150%);
  transition:transform .45s cubic-bezier(.2,.9,.3,1)}
.dk.in{transform:none}
.dk-in{position:relative;display:flex;align-items:center;gap:2px;padding:5px;
  background:var(--dk-sheet);backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--dk-line);border-radius:var(--dk-radius);
  box-shadow:0 12px 34px rgba(0,0,0,.4);pointer-events:auto;max-width:100%;min-width:0}
.dk-i{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:46px;padding:0 15px;border:0;background:transparent;cursor:pointer;min-width:0;
  font-family:var(--dk-font);font-size:14px;font-weight:600;color:var(--dk-ink);text-decoration:none;
  border-radius:calc(var(--dk-radius) - 2px);white-space:nowrap;transition:color .18s ease}
.dk-i:hover,.dk-i.on{color:var(--dk-ink-on)}
.dk-i:focus-visible{outline:2px solid var(--dk-accent);outline-offset:2px}
.dk-cta{background:var(--dk-accent);color:var(--dk-accent-ink)}
.dk-cta:hover,.dk-cta.on{color:var(--dk-accent-ink);filter:brightness(1.07)}
.dk-pill{position:absolute;left:0;top:5px;height:46px;width:0;opacity:0;
  background:var(--dk-pill);border-radius:calc(var(--dk-radius) - 2px);z-index:0;
  transition:transform .3s cubic-bezier(.2,.9,.3,1),width .3s cubic-bezier(.2,.9,.3,1),opacity .2s ease}
.dk-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
/* Exactly ONE chat entry point at any width. chat.css sets .dk-chat{display:none}
   at (0,1,0), but the chat tile also carries .dk-i, and .dk-i{display:inline-flex}
   lives in THIS sheet, which is linked after chat.css. Equal specificity, so
   source order won and the desktop showed the fab AND a dock chat tile. Written
   at (0,2,0) here so it wins whichever order the two sheets load in. */
.dk-i.dk-chat{display:none}
@media(max-width:1023px){ .dk-i.dk-chat{display:inline-flex} }
body.has-dock{padding-bottom:86px}
/* the open chat panel owns the bottom right, so the dock steps out of its way */
html.scq-open .dk{transform:translateY(150%)}
/* five labels never fit a 390px dock, so the least essential drop out and the
   header drawer carries the full set */
@media(max-width:720px){ .dk-wide{display:none} .dk-i{padding:0 12px;font-size:13.5px} }
@media(max-width:400px){ .dk-i{padding:0 10px} }