/* edge — four wedges, each showing a screen of the product rather than a
   drawing of the idea.

   The layout rule that matters: every card shares ONE row track list, so the
   heading, mockup and body sit on the same baselines across all four. Letting
   each card size its own mockup is what made an earlier version read as
   assembled rather than designed. */
[data-slide="edge"] .wedges { display: grid; grid-template-columns: repeat(2, 1fr);
                              gap: 1px; background: var(--border); border: 1px solid var(--border); }
[data-slide="edge"] .wedge { background: var(--surface); padding: clamp(0.8rem, 1.6vw, 1.1rem);
                             display: grid; grid-template-rows: auto 178px 1fr;
                             gap: 0.5rem; align-content: start; }

/* icon and heading share the line */
[data-slide="edge"] h3 { display: flex; align-items: center; gap: 0.5rem;
                         font-size: 0.92rem; line-height: 1.25; }
[data-slide="edge"] h3 .icon { width: 19px; height: 19px; flex: 0 0 auto; color: var(--accent); }
[data-slide="edge"] p { font-size: 0.74rem; line-height: 1.4; color: var(--fg-muted); max-width: none; margin: 0; }

/* the mockup slot. .win is shared with slide 04's device frame. */
[data-slide="edge"] .viz { display: flex; min-height: 0; }
[data-slide="edge"] .win { flex: 1; min-height: 0; }
[data-slide="edge"] .win-body { gap: 0.24rem; overflow: hidden; }

/* 1 — the conversation. The identity row and the input field are what make it
   read as a product rather than a transcript; the listing preview is the
   moment the answer stops being text and becomes inventory. */
[data-slide="edge"] .who { display: flex; align-items: center; gap: 0.3rem; padding-bottom: 0.12rem; }
[data-slide="edge"] .who .av { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
                               background: var(--accent); }
[data-slide="edge"] .who em { font-style: normal; font-size: 0.6rem; color: var(--fg); }
[data-slide="edge"] .who b { margin-left: auto; font-family: var(--font-mono); font-size: 0.52rem; font-weight: 400;
                             letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
/* shape and colour come from components.css .bub; only the size is local */
[data-slide="edge"] .bub { font-size: 0.62rem; line-height: 1.22; }
/* the listing preview, nested inside the answer bubble the way a rich reply
   renders in a real chat client */
[data-slide="edge"] .stub { display: flex; align-items: center; gap: 0.32rem; margin-top: 0.18rem;
                            border: 1px solid var(--border); background: var(--surface-2);
                            padding: 0.14rem 0.35rem; font-size: 0.6rem; border-radius: 3px; }
[data-slide="edge"] .stub em { font-style: normal; color: var(--fg); }
[data-slide="edge"] .stub b { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 400; color: var(--accent); }
[data-slide="edge"] .stub .thumb { width: 16px; height: 12px; flex: 0 0 auto;
                                   background: linear-gradient(135deg, var(--surface-2) 40%, var(--border));
                                   border: 1px solid var(--border); }
[data-slide="edge"] .field { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
                             gap: 0.3rem; font-size: 0.61rem; color: var(--fg-muted); background: var(--surface);
                             border: 1px solid var(--border); padding: 0.16rem 0.16rem 0.16rem 0.4rem; }
/* the send affordance is a small accent square, which is what says "app" */
[data-slide="edge"] .field .send { display: inline-flex; align-items: center; justify-content: center;
                                   width: 16px; height: 16px; flex: 0 0 auto;
                                   background: var(--accent); color: var(--bg); }
[data-slide="edge"] .field .send svg { width: 10px; height: 10px; }

/* 2 — the criteria screen: the granularity the structured fields make
   possible, as label/value pairs rather than prose */
[data-slide="edge"] .crits { display: grid; grid-template-columns: 1fr 1fr; gap: 0.22rem; }
[data-slide="edge"] .crit { display: flex; flex-direction: column; gap: 0.05rem;
                            border: 1px solid var(--border); background: var(--surface);
                            padding: 0.18rem 0.4rem; min-width: 0; }
[data-slide="edge"] .crit em { font-style: normal; font-family: var(--font-mono); font-size: 0.5rem;
                               letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); }
[data-slide="edge"] .crit b { font-size: 0.62rem; font-weight: 400; color: var(--fg);
                              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-slide="edge"] .crit.on { border-color: var(--accent); }
[data-slide="edge"] .crit.on b { color: var(--accent); }

/* 3 — the artifact itself. Gutter numbers and three quiet colours are what
   make it read as an editor rather than a paragraph. */
[data-slide="edge"] .code pre { font-family: var(--font-mono); font-size: 0.58rem; line-height: 1.5;
                                color: var(--fg-muted); margin: 0; overflow: hidden; }
[data-slide="edge"] .code pre i { font-style: normal; display: inline-block; width: 1.1rem;
                                  color: var(--fg-muted); opacity: 0.45;
                                  border-right: 1px solid var(--border); margin-right: 0.45rem; }
[data-slide="edge"] .code em { font-style: normal; color: var(--accent); }
[data-slide="edge"] .code pre b { font-weight: 400; color: var(--fg); }
[data-slide="edge"] .gen { margin-top: auto; font-family: var(--font-mono); font-size: 0.55rem;
                           letter-spacing: 0.06em; color: var(--fg-muted); }

/* 4 — three perk rows: the credit check, a partner, and the neighbourhood.
   The lead perk carries the accent; the others stay quiet. */
[data-slide="edge"] .perk { display: flex; align-items: stretch; border: 1px solid var(--border);
                            background: var(--surface); }
[data-slide="edge"] .p-body { flex: 1; min-width: 0; padding: 0.26rem 0.42rem;
                              display: flex; flex-direction: column; gap: 0.08rem; }
[data-slide="edge"] .p-body em { font-style: normal; font-size: 0.64rem; color: var(--fg);
                                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-slide="edge"] .p-body b { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 400;
                                color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis;
                                white-space: nowrap; }
[data-slide="edge"] .p-badge { display: flex; align-items: center; padding: 0 0.42rem;
                               border-left: 1px dashed var(--border);
                               font-family: var(--font-mono); font-size: 0.52rem;
                               letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
[data-slide="edge"] .perk.lead { border-color: var(--accent); background: var(--accent-soft); }
[data-slide="edge"] .perk.lead .p-badge { border-left-color: var(--accent); color: var(--accent); }

@media (max-height: 780px) {
  [data-slide="edge"] .wedge { grid-template-rows: auto 146px 1fr; gap: 0.26rem;
                               padding: 0.5rem 0.8rem; }
  [data-slide="edge"] h3 .icon { width: 17px; height: 17px; }
  [data-slide="edge"] .win-body { gap: 0.18rem; padding: 0.3rem 0.5rem; }
  /* the identity row is the first thing to give on a short screen: the window
     title already names the product, the input row cannot go */
  [data-slide="edge"] .who { display: none; }
  [data-slide="edge"] .bub { font-size: 0.6rem; }
  [data-slide="edge"] .code pre { line-height: 1.42; }
  [data-slide="edge"] .crits { gap: 0.18rem; }
  /* the shorter screen shows six criteria instead of eight; the swap-excluded
     tile is the argument and must never be the one that clips */
  [data-slide="edge"] .crit.opt { display: none; }
  [data-slide="edge"] .p-body { padding: 0.18rem 0.42rem; gap: 0.04rem; }
}

@media (max-width: 700px) {
  [data-slide="edge"] .wedges { grid-template-columns: 1fr; }
  [data-slide="edge"] .wedge { grid-template-rows: auto 170px auto; }
}