/* mock/agent/agent.css — the agent mock's additions to the shared kit (Kanah-Agent-Mock-Spec.md §6–§13). Tokens from shared/styles.css only;
   flat surfaces, no strokes, no shadows; motion on the shared tokens. */

/* ---- sidebar: the deal header, the requests count, the Free participant block ---- */
.deal-h{display:grid;gap:2px;padding:14px 14px 8px;margin-top:6px}
.deal-h b{font-size:14px;font-weight:600;color:var(--paper)}
.deal-h span{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--side-tag)}
.nav .count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:11px;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--amber);color:var(--forest)}
.free{display:grid;gap:4px;padding:12px 14px;margin:0 0 6px;border-radius:12px;background:var(--side-active)}
.free span{font-size:12px;color:var(--side-tag)}
.free span:first-child{font-weight:700;color:var(--paper);font-size:13px}
.free .signup{margin-top:6px;height:34px;border:0;border-radius:10px;background:var(--ivory);color:var(--forest);font-weight:700;font-size:13px;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.free .signup:hover{background:var(--paper)}

/* ---- Transactions (spec §7) ---- */
.deals-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.deals-head span{color:var(--muted);font-size:13px}
.deals{display:grid;gap:10px;margin-top:12px}
.deal{display:grid;grid-template-columns:64px 1.4fr 1fr auto;gap:16px;align-items:center;padding:14px 18px;border:0;border-radius:var(--radius);background:var(--card)}
.deal.live{background:var(--paper)}
.deal img,.thumb-empty{width:64px;height:48px;border-radius:8px;object-fit:cover;background:var(--thumb);display:block}
.deal-main{display:grid;gap:4px}
.deal-main b{font-size:16px;font-weight:600}
.deal-main small{color:var(--muted);font-size:12px}
.deal-next{display:grid;gap:2px}
.deal-next small{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.deal-next b{font-size:14px;font-weight:600}
.deal-next span{font-size:12px;color:var(--muted)}
.deal-act{display:grid;gap:6px;justify-items:end;text-align:right}
.deal-act small{color:var(--muted);font-size:12px}

/* ---- Requests: rows, the Home card, the rail card, the page (spec §10.4) ---- */
.req{display:grid;grid-template-columns:20px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:0;border-radius:12px;background:var(--field);opacity:1;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.req + .req{margin-top:8px}
.req .dir{font-size:16px;color:var(--muted);text-align:center}
.req b{display:block;font-size:14px;font-weight:600}
.req span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.req.done{opacity:.72;background:var(--strip)}
/* A row answered in place is re-rendered done; it fades from its open look into it (revised 24 Sep). */
@starting-style{.req.just{opacity:1;background:var(--field)}}
.req-state{display:inline-flex;align-items:center;height:36px;font-size:13px;font-weight:600;color:var(--green);white-space:nowrap}
.req.unsent{background:var(--clay-wash)}
.req-card{margin-bottom:14px}
.req-card .rail-h{margin-bottom:10px}
.rail-req .req{grid-template-columns:16px 1fr auto;padding:10px 12px}
.rail-req .textbtn{margin-top:10px}
.req-list{display:grid;gap:8px;margin:8px 0 14px}
.req-list .req + .req{margin-top:0}
.req-page{padding:18px 20px}
.req-page .grouph{margin:10px 0 8px;display:flex;align-items:baseline;gap:10px}
.req-page .grouph small{color:var(--muted);font-weight:500}
.req-ev{font-size:12px;color:var(--muted);margin:4px 0 12px 46px}

/* ---- invitation evidence timelines (spec §8) ---- */
.timeline{display:grid;gap:0;margin:10px 0 14px}
.tl{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:8px 0;position:relative}
.tl b{font-weight:600;font-size:14px}
.tl span{color:var(--muted);font-size:14px}
.tl + .tl{background:linear-gradient(var(--hair),var(--hair)) top/100% 1px no-repeat}

/* ---- the offer inbox and the comparison (spec §8.2) ---- */
.lanes{display:grid;gap:12px;margin:10px 0 14px}
.lane{padding:14px 16px;border:0;border-radius:12px;background:var(--field)}
.lane-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.lane-h b{font-size:15px;font-weight:600}
.lane-b{display:grid;gap:3px;font-size:13px;color:var(--muted)}
.lane-b b{color:var(--ink);font-size:16px;font-weight:600}
.lane .textbtn{margin-top:8px}
.jt.compare td:first-child{color:var(--muted);white-space:nowrap}
.jt.compare tr:last-child td{font-style:italic}

/* ---- surface pieces the agent adds ---- */
.s-quote{display:block;margin:10px 0 14px;padding:12px 16px;border-radius:12px;background:var(--strip);font-style:normal;quotes:none;font-size:14px;color:var(--ink)}
.s-note.ok{color:var(--green);font-weight:600}
.checks{list-style:none;padding:0;display:grid;gap:6px;margin:8px 0 14px}
.checks li{padding-left:26px;position:relative;color:var(--muted)}
.checks li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:5px;background:var(--field)}
.checks li.on{color:var(--ink)}
.checks li.on::before{background:var(--green)}
.checks li.on::after{content:"";position:absolute;left:5px;top:6px;width:6px;height:9px;border-right:2px solid var(--ivory);border-bottom:2px solid var(--ivory);transform:rotate(45deg)}
.plan-card{padding:16px 18px;border:0;border-radius:var(--radius);background:var(--card);margin:6px 0 14px}
.plan-h{display:flex;align-items:baseline;justify-content:space-between}
.plan-h b{font-size:18px;font-weight:700}
.plan-h .price{font-family:var(--font-serif);font-size:26px}
.plan-card small{display:block;color:var(--muted);font-size:12px;margin:2px 0 8px}
.plan-card .s-lines{margin:0}

/* ---- entry context and the previews (spec §5) ---- */
.entry-prop{margin-top:14px}
.entry-prop img{width:64px;height:48px;border-radius:8px;object-fit:cover}
.preview-card{padding:22px 24px;border:0;border-radius:var(--radius-lg);background:var(--card);display:grid;gap:10px}
.preview-card h2{font-size:26px}

/* ---- Messages: request events between the agents ---- */
.sysline{text-align:center;font-size:12px;color:var(--muted);margin:10px 0}
.grouph.small{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:10px 0 4px}

/* ---- the header card's menu button, top right beside the KPIs ---- */
.hcard{position:relative}
.hcard .iconbtn{position:absolute;top:14px;right:14px}
.hcard .hkpis{padding-right:44px}

/* ---- first-render fixes (Task 14): switch labels, wide surface labels, stacked rail actions, the deal header on the tab bar ---- */
.surface .keep,.vbody .keep,.formpane .keep{display:inline-flex;align-items:center;gap:10px;margin:6px 0;font-size:14px}
.surface .s-row{grid-template-columns:190px 1fr}
.rail-req .req{grid-template-columns:16px 1fr}
.rail-req .req .kit-submit,.rail-req .req .req-state{grid-column:2;justify-self:start;margin-top:6px}
@media (max-width:640px){.deal-h{display:none}}

@media (max-width:900px){.deal{grid-template-columns:48px 1fr;gap:10px}.deal-next,.deal-act{grid-column:2}.tl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.req,.free .signup{transition:none}}