/* =====================================================================================================
   Duit window (.dw-*): a compact rendering of the Duit desktop client, for the demos on the site.
   Needs site.css first (tokens, .g glyphs, .sr, --ease). Owner: foundation. Add section-scoped tweaks in
   your own CSS (e.g. .hub .dw { max-width: 620px; }), never here.

   GROUND   Sky by default. <div class="dw" data-ground="cream"> for a cream window. All colours are tokens,
            so a sky window inside a cream section (or the reverse) just works.
   SIZE     One knob: --dw-fs (default 14px). Every size inside is in em, so .x .dw { --dw-fs: 13px; }
            scales the whole window. Width: the window fills its container; give it a max-width in your CSS.
            Height grows with content; if you fix a height on .dw, .dw-body flexes and clips.
   A11Y     Animated windows are aria-hidden="true", with a .sr account next to them (SPEC 2.5). Inside an
            aria-hidden window use <span>/<div>, never <button>/<a> (they would stay focusable). Real controls
            (Replay, tabs) live outside the window.
   MOTION   .dw-rise (fade + 8px rise, .5s) and .dw-caret (blink) stop under reduced motion. Add .is-paused to
            a .dw to freeze its CSS animations while it is off screen. Base styles are the finished state.

   MARKUP (every class; the order shown is the intended order)

   <div class="dw" aria-hidden="true">                             window: 10px radius, 1px --faint border, flat
     <div class="dw-bar">                                          titlebar, 34px (em-based: 2.43em)
       <span class="dw-lights"><i></i><i></i><i></i></span>        three dots, left
       <span class="dw-title"><b>Duit</b> · Oakline Flooring &amp; Tile</span>   centred; optional
                                                                   <svg class="dw-mark" ...> before <b>
       <span class="dw-tag">Example</span>                         right; shows "EXAMPLE" (uppercased)
     </div>
     <div class="dw-body">                                         padding 16-20px; children stacked, 14px gap
       <div class="dw-composer">                                   input look
         <span class="dw-field"><span class="dw-typed"></span><span class="dw-caret"></span><span class="dw-ph">Ask Duit about a job, a customer or an invoice</span></span>
         <span class="dw-send"></span>                             send button with an up arrow (CSS-drawn)
       </div>        (.dw-ph hides itself once .dw-typed has text; keep .dw-typed empty, no whitespace, at start)

       <div class="dw-user">                                       the person's message, right-aligned
         <span class="dw-who-user">Dana</span>
         <p class="dw-bubble">Schedule Sam for a tile delivery on Saturday.</p>
       </div>

       <div class="dw-duit">                                       Duit's answer
         <p class="dw-who"><b>Duit</b><span>·</span><span>Checked Jobber</span></p>
              (while working: <span><span class="g g-wait">~</span> Checking Jobber</span>)
         <p class="dw-line">Sam is free Saturday 8 to 12. <span class="dw-cite"><b>Jobber</b>· job #1042</span></p>
         <div class="dw-cites"><span class="dw-cite"><b>Jobber</b>· job #1042</span><span class="dw-cite"><b>Dana</b>· today 2:14 pm</span></div>
       </div>        (.dw-cite inline after text, or several in a .dw-cites row under the line)

       <ul class="dw-steps">                                       agent actions, one row each
         <li class="dw-step is-ok"><span class="dw-app">Google Calendar</span><span class="dw-act">Sam's calendar · Sat 8:00–10:00</span><span class="dw-state">added</span></li>
       </ul>         The glyph is drawn by the state class: .is-wait ~ (warn) · .is-ok * (ok) · .is-skip . (soft)
                     · .is-bad ! (bad) · no class: blank (not started). Toggle the class to move a step on.
                     One line per step (app · act · state); when the list is under 420px wide, app and state
                     share line 1 and act drops to line 2. (.dw-steps is a size container: keep it in a
                     normal block flow, not in a shrink-to-fit box.)

       <div class="dw-draft">                                      a message waiting for the person
         <div class="dw-draft-head"><span class="dw-to">Rosa Alvarez</span><span class="dw-where">220 Birch Ave</span><span class="dw-chan">Text message</span></div>
         <p class="dw-msg">Hi Rosa, Sam from Oakline will deliver your tile Saturday between 8 and 10 am.</p>
       </div>
       <div class="dw-confirm">                                    nothing sends inside Duit
         <span class="dw-confirm-state">Nothing sends until you confirm in your browser.</span>
         <span class="dw-btn-primary">Confirm 1 in browser ↗</span>
       </div>

       <p class="dw-status"><span class="g g-skip">.</span>Prices withheld for your role</p>   a glyph line
       <span class="dw-link">Ask Dana ↗</span>                     link-styled text (text colour, underline)
       <span class="dw-agent">Claude</span>                        small pill naming the agent in use
       <span class="dw-label">Omphalos · company memory</span>     uppercase mono label (11px)
     </div>
     <p class="dw-foot">Answers use Claude through Oakline's account</p>   centred 12px soft line, after body
   </div>
   ===================================================================================================== */

.dw {
  --dw-fs: 14px;
  position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--faint); border-radius: 10px;
  font-family: var(--sans); font-size: var(--dw-fs); font-weight: 400; line-height: 1.55; letter-spacing: 0;
  text-align: left;
}
.dw p { margin: 0; }
.dw b { font-weight: 400; }

/* ---------- Title bar ---------- */
.dw-bar {
  flex: none; display: grid; grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
  align-items: center; column-gap: 10px; height: 2.43em; padding: 0 .72em 0 .86em;
  border-bottom: 1px solid var(--faint); user-select: none;
}
.dw-lights { display: flex; gap: .5em; justify-self: start; }
.dw-lights > * { display: block; width: .78em; height: .78em; border-radius: 50%; background: var(--faint); border: 1px solid var(--line-strong); }
.dw-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86em; line-height: 1.4; color: var(--soft); }
.dw-title b { color: var(--text); }
.dw-mark { display: inline-block; width: 1.08em; height: 1.08em; margin-right: .5em; vertical-align: -.17em; color: var(--text); }
.dw-tag {
  justify-self: end; padding: .2em .55em; border: 1px solid var(--faint); border-radius: 4px;
  font-family: var(--mono); font-size: .72em; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--soft);
  white-space: nowrap;
}

/* ---------- Body ---------- */
.dw-body {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column; gap: 1em;
  padding: clamp(14px, 1.15em + .4vw, 20px) clamp(14px, 1.15em + .4vw, 20px);
}

/* the person's message */
.dw-user { display: flex; flex-direction: column; align-items: flex-end; }
.dw-who-user { margin: 0 .3em .4em; font-size: .86em; color: var(--soft); }
.dw-bubble {
  max-width: 84%; padding: .64em .93em; background: var(--surface); border: 1px solid var(--faint); border-radius: 10px;
  font-size: 1em; line-height: 1.55; overflow-wrap: anywhere;
}

/* Duit's answer */
.dw-duit { min-width: 0; }
.dw-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .55em; margin-bottom: .25em; font-size: .86em; color: var(--soft); }
.dw-who b { color: var(--text); }
.dw-who .g { margin-right: .35em; }
.dw-line { font-size: 1em; line-height: 1.65; }
.dw-cite {
  display: inline-flex; align-items: center; height: 1.85em; margin-left: .5em; padding: 0 .62em; vertical-align: 1px;
  border: 1px solid var(--line-strong); border-radius: 5px;
  font-size: .82em; line-height: 1; white-space: nowrap; color: var(--soft);
}
.dw-cite b { margin-right: .35em; color: var(--text); }
.dw-cites { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .55em; }
.dw-cites .dw-cite { margin-left: 0; }

/* agent actions */
.dw-steps { container: dw-steps / inline-size; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--faint); }
.dw-step {
  position: relative; display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto; align-items: baseline; gap: .1em .7em;
  padding: .55em 0 .55em calc(1.1ch + .75em); border-bottom: 1px solid var(--faint);
  font-size: .93em; line-height: 1.5;
}
.dw-step::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 1.1ch;
  font-family: var(--mono); line-height: 1.5; text-align: center;
}
.dw-step.is-wait::before { content: "~"; content: "~" / ""; color: var(--warn); font-weight: var(--wait-weight); }
.dw-step.is-ok::before { content: "*"; content: "*" / ""; color: var(--ok); }
.dw-step.is-skip::before { content: "."; content: "." / ""; color: var(--soft); }
.dw-step.is-bad::before { content: "!"; content: "!" / ""; color: var(--bad); }
.dw-app { grid-column: 1; grid-row: 1; min-width: 0; color: var(--text); }
.dw-act { grid-column: 2; grid-row: 1; min-width: 0; color: var(--soft); }
.dw-state { grid-column: 3; grid-row: 1; justify-self: end; font-size: .93em; color: var(--soft); white-space: nowrap; }
/* narrow windows: app and state on the first line, what was done underneath */
@container dw-steps (max-width: 420px) {
  .dw-step { grid-template-columns: minmax(0, 1fr) auto; }
  .dw-act { grid-column: 1 / -1; grid-row: 2; }
  .dw-state { grid-column: 2; }
}

/* drafts and the confirm bar */
.dw-draft { padding: .7em .86em .86em; background: var(--surface); border: 1px solid var(--faint); border-radius: 10px; }
.dw-draft-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .7em; margin: 0 .15em .55em; font-size: .93em; }
.dw-to { color: var(--text); }
.dw-where { color: var(--soft); }
.dw-where::before { content: "· "; content: "· " / ""; }
.dw-chan { margin-left: auto; font-size: .93em; color: var(--soft); }
.dw-msg {
  padding: .55em .72em; background: var(--bg); border: 1px solid var(--faint); border-radius: 6px;
  font-size: .96em; line-height: 1.55; overflow-wrap: anywhere;
}
.dw-confirm {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1em;
  padding-top: .85em; border-top: 1px solid var(--faint); font-size: .93em; color: var(--soft);
}
.dw-confirm-state { display: inline-flex; align-items: center; gap: .5em; min-width: 0; }
.dw-btn-primary {
  display: inline-flex; align-items: center; gap: .4em; height: 2.3em; margin-left: auto; padding: 0 1em; border-radius: 6px;
  background: var(--accent-fill); color: var(--on-accent); font-size: 1em; line-height: 1; letter-spacing: .01em; white-space: nowrap;
}

/* the command line */
.dw-composer {
  display: flex; align-items: center; gap: .7em; padding: .6em .6em .6em .93em;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
}
.dw-field { flex: 1 1 auto; min-width: 0; min-height: 1.5em; font-size: 1em; line-height: 1.5; overflow-wrap: anywhere; }
.dw-typed { color: var(--text); }
.dw-ph { display: inline-block; max-width: calc(100% - .8em); vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--soft); }
.dw-typed:not(:empty) ~ .dw-ph { display: none; }
.dw-caret { display: inline-block; width: .5em; height: 1.1em; margin: 0 .15em 0 1px; vertical-align: -.2em; background: var(--soft); animation: dw-blink 1s steps(2) infinite; }
.dw-send {
  position: relative; flex: none; width: 2.3em; height: 2.3em;
  border: 1px solid var(--line-strong); border-radius: 6px; color: var(--soft);
}
.dw-send::before, .dw-send::after { content: ""; position: absolute; left: 50%; }
.dw-send::before { top: 30%; width: 1.5px; height: 42%; margin-left: -.75px; background: currentColor; }
.dw-send::after {
  top: 31%; width: .48em; height: .48em; margin-left: -.24em;
  border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: rotate(45deg); transform-origin: 50% 50%;
}

/* small parts */
.dw-status { display: flex; align-items: baseline; gap: .55em; font-size: .93em; color: var(--soft); }
.dw-link { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; white-space: nowrap; }
.dw-agent {
  display: inline-flex; align-items: center; gap: .45em; height: 1.75em; padding: 0 .7em;
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: .82em; line-height: 1; color: var(--text); white-space: nowrap;
}
.dw-agent::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: var(--soft); }
.dw-label { font-family: var(--mono); font-size: .79em; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.dw-foot { flex: none; padding: 0 1.15em 1em; text-align: center; font-size: .86em; line-height: 1.5; color: var(--soft); }

/* ---------- Motion ---------- */
@keyframes dw-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes dw-blink { 50% { opacity: 0; } }
.dw-rise { animation: dw-rise .5s var(--ease) both; }
.dw.is-paused, .dw.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .dw-rise, .dw-caret { animation: none; }
}