/* ===================================================================== app
   The overlay, rebuilt as elements rather than shipped as a picture.

   Every raster — lossless WebP included — is a resample: the browser scales it
   to the layout box and the glyph edges land between pixels. Live text does
   not, which is the entire reason this reads sharp and a 2520px still did not.
   It also means no codec, no chroma subsampling, and motion for free.

   Colours are the literal values from DesignKit.swift / Tint, converted once:
   base 0.07,0.08,0.11 · text 0.93,0.95,0.97 · hear 0.38,0.68,1.00 and so on.
   If the app's palette changes, change it here too. */
.app {
  --base:   #12141c;
  --deep:   #0a0d12;
  --text:   #edf2f7;
  --muted:  #99a6ba;
  --line:   rgba(255,255,255,.09);
  --card:   rgba(255,255,255,.045);
  --hear:   #61adff;
  --mic:    #59d6bf;
  --answer: #ff9e40;
  --screen: #c28fff;
  --follow: #9eadcc;
  --bad:    #ff6b6b;
  --good:   #4ccc8c;

  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  /* See-through on purpose. At 93% opaque the backdrop filter had nothing
     visible to work with and the window read as a solid slab. */
  background: linear-gradient(180deg, rgba(18,20,28,.68), rgba(10,13,18,.76));
  box-shadow: 0 30px 70px rgba(0,0,0,.6),
              inset 0 1px 0 rgba(255,255,255,.13),
              inset 0 0 0 1px rgba(255,255,255,.04);
  color: var(--text);
  font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  overflow: hidden;
  backdrop-filter: blur(26px) saturate(140%);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
}

/* Sized from the frame around it, not from itself: an element cannot query
   its own container, so `cqw` on `.app` resolved against the viewport and
   the panel stayed at 15px — 381px tall inside a 334px pane. */
.screen-plain > .app { font-size: clamp(11px, 1.3cqw, 15px); }

.app-bar {
  display: flex; align-items: center; gap: .7em;
  padding: .72em 1em; border-bottom: 1px solid var(--line);
}
.tl { width: .95em; height: .95em; border-radius: 50%; display: grid;
      place-items: center; font-size: .62em; color: rgba(0,0,0,.55); font-weight: 700; }
.tl.red   { background: #ff5f57; }
.tl.amber { background: #febc2e; }
.app-bar .nav { color: var(--muted); letter-spacing: .35em; font-size: .85em; }
.app-bar .count { color: var(--muted); font-size: .85em; }
.app-bar .who { font-weight: 600; }
.app-bar .clock { margin-left: auto; color: var(--muted); font-size: .85em;
                  font-variant-numeric: tabular-nums; }
.app-bar .ttft { color: var(--muted); font-size: .8em; opacity: .75;
                 font-variant-numeric: tabular-nums; }

.app-heard {
  display: flex; align-items: center; gap: .6em;
  padding: .6em 1em; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: .92em; min-height: 2.6em;
}
/* The level meter in the app: three bars that move while speech arrives. */
.eq { display: inline-flex; align-items: flex-end; gap: .13em; height: .95em; flex: none; }
.eq i { width: .17em; background: var(--hear); border-radius: .08em; height: 40%; }
.app.listening .eq i { animation: eq .7s ease-in-out infinite alternate; }
.app.listening .eq i:nth-child(2) { animation-delay: .18s; }
.app.listening .eq i:nth-child(3) { animation-delay: .36s; }
@keyframes eq { from { height: 25%; } to { height: 100%; } }
.caret { display: inline-block; width: .07em; height: 1em; background: var(--muted);
         vertical-align: -.12em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* No wrapping. The app drops the shortcut caps rather than move a button
   to a second line, and below 460pt the window will not shrink further;
   the page shows the same two tiers via a container query. */
.app-keys { display: flex; flex-wrap: nowrap; gap: .5em; padding: .9em 1em .6em; }
@container (max-width: 640px) { .app-keys kbd { display: none; } }
.k {
  display: inline-flex; align-items: center; gap: .55em;
  padding: .55em .85em; border-radius: .85em;
  border: 1px solid color-mix(in srgb, var(--t) 34%, transparent);
  background: color-mix(in srgb, var(--t) 7%, transparent);
  color: color-mix(in srgb, var(--t) 55%, var(--muted));
  font-size: .95em; font-weight: 600; white-space: nowrap;
  transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.k kbd {
  font: 600 .82em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .32em .5em; border-radius: .42em;
  background: color-mix(in srgb, var(--t) 14%, rgba(255,255,255,.05));
  color: inherit;
}
/* Lit: the state the app shows when a control is available or active. */
.k.on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--t) 85%, transparent);
  background: color-mix(in srgb, var(--t) 16%, transparent);
  box-shadow: 0 0 0 .22em color-mix(in srgb, var(--t) 13%, transparent);
}
.k.on kbd { background: color-mix(in srgb, var(--t) 34%, transparent); color: #fff; }
.k.hear   { --t: var(--hear); }
.k.mic    { --t: var(--mic); }
.k.answer { --t: var(--answer); }
.k.screen { --t: var(--screen); }
.k.follow { --t: var(--follow); }

/* End session sits with the clock now, as it does in the app: it is the one
   irreversible control, so it does not belong in the row your hand is
   already in — and the row needs the width. */
.endx { display: grid; place-items: center; width: 1.5em; height: 1.5em;
        border-radius: 999px; font-size: .78em; font-weight: 700;
        color: #ffb4b4; background: rgba(255,107,107,.2);
        border: 1px solid rgba(255,107,107,.35); flex: none; }

.app-body { padding: 1em; min-height: 3.2em; }
.qa {
  border: 1px solid color-mix(in srgb, var(--answer) 45%, transparent);
  border-radius: .75em; padding: .9em 1em 1em;
  background: rgba(255,158,64,.035);
}
.qa-q { display: flex; align-items: flex-start; gap: .6em; font-weight: 680;
        font-size: 1.05em; padding-bottom: .7em; border-bottom: 1px solid var(--line); }
.qa-n { flex: none; width: 1.45em; height: 1.45em; border-radius: 50%;
        background: var(--answer); color: #1a0f00; font-size: .8em; font-weight: 800;
        display: grid; place-items: center; margin-top: .15em; }
.qa-q .dots { margin-left: auto; color: var(--answer); letter-spacing: .1em; }
.qa-a { padding-top: .8em; font-size: .98em; line-height: 1.62; }
.qa-a .lead { color: var(--answer); font-weight: 700; }
.qa-a ul { margin: .7em 0 0; padding: 0; list-style: none; }
.qa-a li { position: relative; padding-left: 1.1em; margin-top: .45em; }
.qa-a li::before { content: "•"; position: absolute; left: .2em; color: var(--hear); }
.qa-a code { font: 400 .92em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
             color: var(--hear); }
.hint { color: var(--muted); }

.app-foot {
  display: flex; align-items: center; gap: .8em;
  padding: .7em 1em; border-top: 1px solid var(--line);
}
.app-foot .sizes { margin-left: auto; display: flex; align-items: center; gap: .5em;
                   color: var(--muted); }
.app-foot .sizes .sm { font-size: .8em; } .app-foot .sizes .lg { font-size: 1.05em; }
.slider { width: 6em; height: .22em; border-radius: 999px; background: rgba(255,255,255,.22);
          position: relative; }
.slider::after { content: ""; position: absolute; right: 0; top: 50%;
                 transform: translateY(-50%); width: .62em; height: .62em;
                 border-radius: 50%; background: #e7edf5; }
.more { width: 1.4em; height: 1.4em; border-radius: 50%; border: 1px solid var(--line);
        display: grid; place-items: center; color: var(--muted); font-size: .72em; }

@media (prefers-reduced-motion: reduce) {
  .app.listening .eq i, .caret { animation: none; }
}

/* No frame and no scene — the window on its own, which is what was asked
   for. It keeps its translucency: the page's own background shows through
   the glass, which is subtle but real, and the interview context now lives
   only in the comparison tab where it is the point. */
.screen-plain {
  position: relative; container-type: inline-size;
  padding: clamp(10px, 2vw, 26px) 0 0;
  min-height: 520px; display: flex; justify-content: center;
}

.screen-plain > .app { position: relative; z-index: 2; width: min(100%, 620px);
                       align-self: flex-start; }

/* ------------------------------------------------------ the call frame
   Two grey rectangles did not read as an interview. This is the layout every
   conferencing app uses while someone presents: the shared content takes the
   stage, participants shrink to tiles beside it, a red border marks exactly
   the region being sent, and the control bar sits underneath. Stacked rather
   than side by side so each screen is full width — side by side halved them
   and the panel inside came out too small to read. */
.calls { display: grid; gap: 26px; }
.call {
  margin: 0; container-type: inline-size;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #16181d, #101216);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.call-top {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; font-size: 13px; color: #cfd6e2;
  background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(255,255,255,.07);
}
.call-top b { font-weight: 600; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: #eb463e; flex: none;
       box-shadow: 0 0 0 3px rgba(235,70,62,.2); }
.call-top .mid { margin-left: auto; color: #7c8697; font-variant-numeric: tabular-nums; }
.call-top .clk { color: #7c8697; font-variant-numeric: tabular-nums; }

.call-stage { display: flex; gap: 12px; padding: 14px; }
/* The red rule is the whole point of the comparison: it says "this rectangle
   is what the other side receives". */
.shared {
  position: relative; flex: 1; min-width: 0; border-radius: 10px;
  background: #0c0e13; overflow: hidden;
  aspect-ratio: 16 / 8.2;
}
/* Drawn over the children, not under them: an inset box-shadow paints on the
   element's own background layer, so the pad's opaque tab bar was covering
   the top of the border. */
.shared::after {
  content: ""; position: absolute; inset: 0; border-radius: 10px; z-index: 5;
  border: 2px solid rgba(235,70,62,.92); pointer-events: none;
}
.tiles { width: 170px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.tile {
  position: relative; border-radius: 10px; aspect-ratio: 4 / 3;
  background: #191c22; border: 1px solid rgba(255,255,255,.07);
  display: grid; place-items: center;
}
.tile b { position: absolute; left: 9px; bottom: 7px; font-size: 11.5px;
          font-weight: 560; color: #c3cad6; }
.face { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
        font-size: 17px; font-weight: 620; color: #fff; }
.face.p { background: #9a583f; } .face.y { background: #3b6692; }

/* the shared coding pad — real text, so it stays sharp like everything else */
.pad { position: absolute; inset: 0; display: flex; flex-direction: column;
       font: 400 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pad-bar { display: flex; align-items: center; gap: 14px; padding: 7px 12px;
           background: #15181f; border-bottom: 1px solid rgba(255,255,255,.06);
           font-family: inherit; font-size: 11.5px; color: #717b8c; }
.pad-bar .f.on { color: #dde4ef; }
.pad-bar .pad-run { margin-left: auto; color: #6ee7a8; }
.pad-code { margin: 0; padding: 10px 12px; list-style: none; counter-reset: l;
            color: #93a0b4; }
/* `pre` belongs on the line, not the list: on the <ol> the indentation
   between <li> tags became real newlines and every row gained a blank one. */
.pad-code li { counter-increment: l; min-height: 1.6em; white-space: pre; }
.pad-code li::before { content: counter(l); display: inline-block; width: 2.2em;
                       color: #4a5363; text-align: right; margin-right: 1.1em; }
.pad-code .kw { color: #c58cf0; font-style: normal; }
.pad-code .ty { color: #66c2f2; font-style: normal; }
.pad-code .fn { color: #f2d685; font-style: normal; }
.pad-code .nm { color: #b3d699; font-style: normal; }
.pad-code .cm { color: #6b7a70; font-style: normal; }

/* The panel, at the size it would really be on a shared screen. */
.shared > .app { position: absolute; right: 3.5%; bottom: 5%; width: 54%;
                 font-size: clamp(7px, 1.45cqw, 12px); }

.call-bar { display: flex; align-items: center; justify-content: center; gap: 10px;
            padding: 11px; border-top: 1px solid rgba(255,255,255,.07);
            background: rgba(255,255,255,.02); }
.cc { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
      background: rgba(255,255,255,.07); color: #c3cad6; }
.cc svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7;
          stroke-linecap: round; stroke-linejoin: round; }
.cc.on { background: rgba(99,140,255,.25); color: #bcd0ff; }
.cc.leave { width: 52px; border-radius: 999px; background: #e0413a; color: #fff; }
.cc.leave svg { fill: currentColor; stroke: none; width: 19px; height: 19px;
                transform: rotate(135deg); }
.call figcaption { padding: 12px 16px 14px; font-size: 13.5px;
                   color: var(--ink-faint);
                   border-top: 1px solid rgba(255,255,255,.07); }

@container (max-width: 620px) {
  .tiles { display: none; }
  .shared > .app { width: 72%; }
}


/* Drawn to match the app's SF Symbols — same silhouette and weight. Emoji
   were the quick way and looked like emoji. */
.ico { width: 1.15em; height: 1.15em; flex: none;
       fill: none; stroke: currentColor; stroke-width: 1.8;
       stroke-linecap: round; stroke-linejoin: round; }
.eye .ico { width: .95em; height: .95em; }

/* In the comparison the point is that the panel is *there*, not what it says.
   At pane size the long question wrapped to three lines and pushed the
   controls out of the frame, so the compact variant drops what is only
   legible at hero size. */
.app.compact .who,
.app.compact .ttft { display: none; }
.app.compact .app-keys { gap: .45em; padding: .7em .8em .15em; }
.app.compact .k { padding: .45em .6em; font-size: .9em; }
.app.compact .app-body { padding: .7em .8em; }
.app.compact .qa-q { font-size: .95em; }
.app.compact .qa-a { font-size: .9em; }