/* shared/app-cards.css: result cards drawn in HTML inside the one window (site.css §9), for the inner pages.
 * Loads after site.css. Every size is in design units: calc(var(--u)*N) is N design pixels, so a card scales with its window.
 * The look follows the home's drawn cards (.w-tool, .d-card): #262626 fill, --edge border, 12u radius, #333 inner rules,
 * a 13u/600 title over an 11.5u --dim line, 12u buttons. A filled button inside a card is the app's in-card button
 * (--card-btn, the teal mixed 66% with black, white text: SiteIntelCard.jsx, MarketVoiceStudyCard.jsx). Weights 400/500/600 only.
 * Accents follow DESIGN.md §5 card accent map, per the real component: Market Voice and Site Intelligence teal #21ad8f,
 * contacts pink #ec4899 only on contact cards, data #10b981, research/image #06b6d4, generic deliverable #6366f1, amber #f59e0b.
 * Set it per card with style="--a:#…"; the default is teal. No label renders below 11 design units (motion red team M1).
 * Elements that show per state carry data-s; a flex or table-row element needs --d (the .play rule reads display:var(--d)).
 * Started with the Research page (work/understand). Add a card family here when a page needs it; keep one family per block. */

/* ── the card ── */
.pc{--d:block;max-width:calc(var(--u)*560);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#292929;overflow:hidden;font-size:calc(var(--u)*13)}
.pc>header{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*12);border-bottom:1px solid #454545}
.pc>header strong{display:block;font-size:calc(var(--u)*13);font-weight:600;line-height:1.3}
.pc>header small{display:block;font-size:calc(var(--u)*11.5);color:var(--dim)}
.pc-ico{flex:none;width:calc(var(--u)*28);height:calc(var(--u)*28);display:grid;place-items:center;border-radius:calc(var(--u)*8);background:color-mix(in srgb,var(--a,var(--teal)) 16%,transparent);color:var(--a,var(--teal))}
.pc-body{display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*11) calc(var(--u)*14) calc(var(--u)*12)}
.pc-body p{font-size:calc(var(--u)*13);line-height:1.5;color:#f5f5f5}
.pc blockquote{padding-left:calc(var(--u)*10);border-left:calc(var(--u)*2) solid var(--border);font-size:calc(var(--u)*12.5);font-style:italic;line-height:1.5;color:var(--sub)}
.pc blockquote span{font-style:normal;color:var(--dim)}
.pc>footer{display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*8);padding:calc(var(--u)*9) calc(var(--u)*12);border-top:1px solid #454545}
.pc>footer em{margin-left:auto;font-style:normal;font-size:calc(var(--u)*11.5);color:var(--dim)}
.pc-btn{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*28);padding:0 calc(var(--u)*11);border:1px solid var(--edge);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*12);font-weight:600;white-space:nowrap;color:var(--ink)}
.pc-btn .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.pc-fill{background:var(--card-btn);border-color:transparent;color:var(--card-btn-ink)}
.pc-tag{margin-left:auto;padding:calc(var(--u)*3) calc(var(--u)*7);border-radius:calc(var(--u)*5);background:color-mix(in srgb,var(--a,var(--teal)) 16%,transparent);color:color-mix(in srgb,var(--a,var(--teal)) 60%,var(--ink));font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase}

/* number tiles */
.pc-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*8)}
.pc-tiles>div{padding:calc(var(--u)*8) calc(var(--u)*10);border:1px solid #454545;border-radius:calc(var(--u)*9);background:var(--page)}
.pc-tiles b{display:block;font-size:calc(var(--u)*19);font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pc-tiles b.a{color:color-mix(in srgb,var(--a) 55%,var(--ink))}
.pc-tiles span{font-size:calc(var(--u)*11);color:var(--sub)}

/* a written result: heading, sentence, placeholder lines */
.pc-md h4{font-size:calc(var(--u)*13.5);font-weight:600}
.greek{display:grid;gap:calc(var(--u)*7)}
.greek span{display:block;height:calc(var(--u)*6);border-radius:calc(var(--u)*3);background:#333333}

/* table */
.pc-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:calc(var(--u)*12)}
.pc-table th,.pc-table td{padding:calc(var(--u)*7) calc(var(--u)*10);text-align:left;vertical-align:top;border-bottom:1px solid #454545;overflow-wrap:anywhere}
.pc-table thead th{background:#212121;font:600 calc(var(--u)*11)/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.pc-table tbody th{font-weight:600;color:var(--ink)}
.pc-table tr:last-child>*{border-bottom:0}
.pc-table td i{display:block;width:var(--w);min-width:calc(var(--u)*6);height:calc(var(--u)*4);margin-top:calc(var(--u)*5);border-radius:calc(var(--u)*2);background:var(--a,var(--teal))}
.pc-table .yes{color:var(--teal-hi);font-weight:600}
.pc-table tr.pc-gap{--d:table-row}
.pc-table tr.pc-gap>*{background:rgba(16,185,129,.12)}
.pc-dt>footer{justify-content:space-between}
.pc-dt>footer em{margin-left:0}

/* the agent's choice of a way to answer, the others listed */
.pc-choice header{gap:calc(var(--u)*9)}
.pc-ping{flex:none;width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:50%;background:var(--teal);box-shadow:0 0 0 calc(var(--u)*3) rgba(33,173,143,.2)}
.pc-choice ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*5);padding:calc(var(--u)*8) calc(var(--u)*10) calc(var(--u)*4)}
.pc-choice li{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*7) calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*9)}
.pc-choice li>i{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);border-radius:50%;border:1.5px solid #454545}
.pc-choice li.pick{border-color:#1f6b5a;background:#22302c}
.pc-choice li.pick>i{border-color:var(--teal);box-shadow:inset 0 0 0 calc(var(--u)*3.5) var(--teal)}
.pc-choice li div{display:grid;gap:calc(var(--u)*1);min-width:0}
.pc-choice li span{font-size:calc(var(--u)*12);font-weight:600;line-height:1.3}
.pc-choice li small{font-size:calc(var(--u)*11);line-height:1.35;color:var(--sub)}
.pc-choice li b{margin-left:auto;flex:none;padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*5);background:rgba(33,173,143,.18);color:var(--teal-hi);font:600 calc(var(--u)*11)/1.2 var(--sans);letter-spacing:.04em;text-transform:uppercase}
.pc-more{padding:calc(var(--u)*4) calc(var(--u)*12) calc(var(--u)*10);font-size:calc(var(--u)*11);color:var(--dim)}
/* the chosen way, after the choice */
.pc-chosen{--d:inline-flex;display:var(--d);align-self:flex-start;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*5) calc(var(--u)*11);border:1px solid #454545;border-radius:calc(var(--u)*999);font-size:calc(var(--u)*12);color:var(--sub)}
.pc-chosen .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);color:var(--teal)}

/* checklist */
.pc-checks{padding:calc(var(--u)*2) calc(var(--u)*12)}
.pc-checks li{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*8) 0;border-bottom:1px solid #454545;font-size:calc(var(--u)*12.5);font-weight:600}
.pc-checks li:last-child{border-bottom:0}
.pc-checks li:not(.on){color:var(--sub)}
.pc-checks li small{margin-left:auto;font-size:calc(var(--u)*11);font-weight:400;color:var(--dim)}
.pc-checks li>i{flex:none;width:calc(var(--u)*16);height:calc(var(--u)*16);display:grid;place-items:center;border-radius:calc(var(--u)*4);border:1.5px solid #454545}
.pc-checks li.on>i{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
.pc-checks li>i .ic{width:calc(var(--u)*10);height:calc(var(--u)*10);stroke-width:3}

/* sources */
.pc-sources{--d:inline-flex;align-self:flex-start;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*26);padding:0 calc(var(--u)*10);border:1px solid #454545;border-radius:calc(var(--u)*999);font-size:calc(var(--u)*12);color:var(--sub)}
.pc-sources span{margin-right:calc(var(--u)*3)}
.pc-sources i{width:calc(var(--u)*12);height:calc(var(--u)*12);border-radius:calc(var(--u)*3);background:var(--c)}
.pc-sources .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);color:var(--dim)}
.pc-srclist{padding:calc(var(--u)*2) calc(var(--u)*12) calc(var(--u)*6)}
.pc-srclist li{display:flex;align-items:flex-start;gap:calc(var(--u)*10);padding:calc(var(--u)*8) 0;border-bottom:1px solid #454545}
.pc-srclist li:last-child{border-bottom:0}
.pc-srclist li>i{flex:none;width:calc(var(--u)*13);height:calc(var(--u)*13);margin-top:calc(var(--u)*2);border-radius:calc(var(--u)*3);background:var(--c)}
.pc-srclist strong{display:block;font-size:calc(var(--u)*12.5);font-weight:600;line-height:1.35}
.pc-srclist small{display:block;font-size:calc(var(--u)*11);color:var(--dim)}
.pc-srclist li.more{padding-left:calc(var(--u)*23);font-size:calc(var(--u)*11.5);color:var(--sub)}

/* a file attached to a request */
.ask-file{display:inline-flex;align-items:center;gap:calc(var(--u)*7);width:max-content;max-width:100%;margin-bottom:calc(var(--u)*8);padding:calc(var(--u)*6) calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*9);background:var(--panel);font-size:calc(var(--u)*12)}
.ask-file .ic{width:calc(var(--u)*13);height:calc(var(--u)*13);color:#06b6d4}

/* ── panels beside the chat (on site.css .w-canvas + .c-bar + .c-paper) ── */
.c-bar .ic{width:calc(var(--u)*13);height:calc(var(--u)*13);color:var(--dim)}
.c-paper .c-quote{padding-left:calc(var(--u)*10);border-left:calc(var(--u)*2) solid var(--border);font-style:italic;color:var(--sub)}
.c-paper mark{background:rgba(245,158,11,.25);color:var(--ink);border-radius:calc(var(--u)*3);padding:0 calc(var(--u)*2)}
.c-paper .greek{margin-top:calc(var(--u)*14)}
/* the table workbench: a table open beside the chat, with a run across its rows */
.twb-title{display:flex;align-items:baseline;gap:calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*14) calc(var(--u)*4)}
.twb-title strong{font-size:calc(var(--u)*14);font-weight:600}
.twb-title small{font-size:calc(var(--u)*11.5);color:var(--dim)}
.twb-tools{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:calc(var(--u)*4);padding:calc(var(--u)*6) calc(var(--u)*12) calc(var(--u)*10);border-bottom:1px solid #454545;font-size:calc(var(--u)*11.5);color:var(--sub)}
.twb-tools span{display:inline-flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*5) calc(var(--u)*8);border-radius:calc(var(--u)*7)}
.twb-tools .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.twb-tools b{margin-left:auto;display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*28);padding:0 calc(var(--u)*11);border-radius:calc(var(--u)*7);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*12);font-weight:600}
.twb-strip{--d:flex;position:relative;align-items:center;gap:calc(var(--u)*12);margin:calc(var(--u)*12) calc(var(--u)*14) calc(var(--u)*4);padding:calc(var(--u)*9) calc(var(--u)*12) calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*9);background:#292929;font-size:calc(var(--u)*12);color:var(--sub);overflow:hidden}
.twb-strip strong{color:var(--ink);font-weight:600}
.twb-strip em{margin-left:auto;padding:calc(var(--u)*3) calc(var(--u)*8);border:1px solid var(--border);border-radius:calc(var(--u)*6);font-style:normal;font-size:calc(var(--u)*11);color:var(--ink)}
.twb-strip>i{position:absolute;left:0;bottom:0;width:var(--p);height:calc(var(--u)*3);background:var(--teal)}
.twb-strip.is-done{border-color:#1f6b5a;background:#22302c}
.twb-grid{margin-top:calc(var(--u)*8)}
.twb-grid td{font-size:calc(var(--u)*12)}
.twb-pending{color:var(--dim)}

/* ── the Choose a Play modal (the app's play picker, assets/play-picker.jpg): a veil over the window, the modal with a subtitle,
   a search field, Plays as rows with pill badges (Fractl teal, your team amber), and on the right the Play's steps over a
   full-width Load Play button. Used by the home (#plays); build/plays should reuse this markup and change only the Play names.
   Markup: .w-veil + .w-modal > .m-head + .m-body > (.m-left > .m-search + ul.pl-list > li.pl-it) + (.m-right > .m-hint | .m-det) ── */
.w-veil{position:absolute;inset:0;z-index:5;background:rgba(12,12,12,.66)}
.w-modal{--d:flex;position:absolute;z-index:6;left:50%;top:50%;width:calc(var(--u)*840);height:calc(var(--u)*520);margin:calc(var(--u)*-246) 0 0 calc(var(--u)*-420);flex-direction:column;background:#292929;border:1px solid #454545;border-radius:calc(var(--u)*14);box-shadow:0 calc(var(--u)*20) calc(var(--u)*50) rgba(0,0,0,.5);overflow:hidden}
.m-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(var(--u)*15) calc(var(--u)*18) calc(var(--u)*13);border-bottom:1px solid #454545}
.m-head strong{display:block;font-size:calc(var(--u)*17);font-weight:600;letter-spacing:-.01em}
.m-head small{display:block;font-size:calc(var(--u)*12);color:var(--sub)}
.m-head .ic{color:var(--sub)}
.m-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--u)*370)}
.m-left{display:flex;flex-direction:column;gap:calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*14);border-right:1px solid #454545;min-height:0}
.m-search{flex:none;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*34);padding:0 calc(var(--u)*11);border:1px solid var(--edge);border-radius:calc(var(--u)*9);font-size:calc(var(--u)*12.5);color:var(--dim)}
.pl-list{display:grid;gap:calc(var(--u)*7)}
.pl-it{position:relative;padding:calc(var(--u)*9) calc(var(--u)*12) calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*9);background:#292929;transition:border-color var(--motion-medium) var(--ease-out),background-color var(--motion-medium) var(--ease-out)}
.pl-it strong{display:block;font-size:calc(var(--u)*13);font-weight:600;margin-bottom:calc(var(--u)*6);padding-right:calc(var(--u)*20)}
.pl-it span{display:inline-block;padding:calc(var(--u)*1) calc(var(--u)*8) calc(var(--u)*2);border-radius:calc(var(--u)*999);border:1px solid #1f6b5a;font-size:calc(var(--u)*11);font-weight:500;color:var(--teal-hi)}
.pl-it span.pl-own{border-color:#6b5320;color:#f5c26b}
.pl-ok{position:absolute;right:calc(var(--u)*12);top:calc(var(--u)*11);display:none;color:var(--teal)}
.pl-it.f-on{border-color:#1f6b5a;background:#22302c}
.pl-it.f-on .pl-ok{display:block}
.m-right{display:flex;flex-direction:column;min-height:0;padding:calc(var(--u)*16) calc(var(--u)*18)}
.m-hint{margin:auto;color:var(--dim);font-size:calc(var(--u)*13)}
.m-det{--d:flex;flex-direction:column;height:100%}
.m-det>small{font:600 calc(var(--u)*11)/1.3 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.m-det>strong{margin:calc(var(--u)*5) 0 calc(var(--u)*8);font-size:calc(var(--u)*17);font-weight:600;line-height:1.25;letter-spacing:-.01em}
.m-det>p{font-size:calc(var(--u)*12.5);line-height:1.5;color:var(--sub)}
.m-how{margin-top:calc(var(--u)*12);padding:calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*12);border:1px solid #1f5c4f;border-radius:calc(var(--u)*10);background:rgba(33,173,143,.05)}
.m-how>span{font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--sub)}
.m-how ol{display:grid;gap:calc(var(--u)*7);margin-top:calc(var(--u)*9);font-size:calc(var(--u)*12.5)}
.m-how li{display:flex;align-items:center;gap:calc(var(--u)*9)}
.m-how li b{flex:none;width:calc(var(--u)*18);height:calc(var(--u)*18);border-radius:50%;display:grid;place-items:center;background:#1f3530;color:var(--teal-hi);font-size:calc(var(--u)*11);font-weight:600}
.pl-load{margin-top:auto;height:calc(var(--u)*38);display:flex;align-items:center;justify-content:center;border-radius:calc(var(--u)*9);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*13);font-weight:600}
@media (max-width:899px){
  /* the modal is the whole window, list then detail (the page decides which half shows per state) */
  .w-modal{left:0;top:0;margin:0;width:100%;height:100%;border-radius:0;border:0}
  .m-body{grid-template-columns:minmax(0,1fr)}
  .m-left{border-right:0}
  .m-head small{display:none}
}