/* site-v51-memory-compile: #memory, THE COMPILE. One pinned window on Tern Coffee › Knowledge, redrawn from the workspace app
 * (workspace-shots/07_tern_*, the settled knowledge face in 05_mock_client-knowledge-v5, drawn here in the dark workspace tokens):
 * 0 empty page · 1 build dialog · 2 the compile · 3 the finished page · 4 an answer with its sources · 5 a chat job for the client.
 * Loads after shared/site.css and home.css; declares no token; every size is in design units (--u). */

.sec-memory{padding-block:0}
.st-mem{--tc:400px}
.w-kn{--dw:920;--dh:640}
.w-url .k-u{--d:inline}

/* every element that changes sets its own --d: the custom property inherits, so a flex parent would leak into its children */
/* ── the workspace app (states 0 to 4) ── */
.k-app{--d:flex;position:relative;flex:1;min-width:0;min-height:0;flex-direction:column}
.k-bar{flex:none;height:calc(var(--u)*46);display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*14);border-bottom:1px solid #454545;font-size:calc(var(--u)*12)}
.k-logo{display:flex;align-items:center;gap:calc(var(--u)*6);font-size:calc(var(--u)*14);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.k-logo img{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.k-logo i{font-style:normal;color:var(--brand);margin-right:calc(var(--u)*2)}
.k-pill{display:flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*26);padding:0 calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*7);color:var(--sub);white-space:nowrap}
.k-pill.k-bld{color:var(--ink)}
.k-pill .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.k-bar .w-scope{height:calc(var(--u)*34);gap:calc(var(--u)*8);padding:0 calc(var(--u)*10)}
.k-bar .w-seg>span:not(.w-drop){min-width:calc(var(--u)*34)}
.k-sun{color:var(--sub);width:calc(var(--u)*16);height:calc(var(--u)*16)}
.k-crumb{flex:none;height:calc(var(--u)*32);display:flex;align-items:center;gap:calc(var(--u)*8);padding:0 calc(var(--u)*14);border-bottom:1px solid #454545;font-size:calc(var(--u)*12);color:var(--sub)}
.k-crumb i{font-style:normal;color:#454545}
.k-crumb b{color:var(--ink)}
.k-back{display:grid;place-items:center;width:calc(var(--u)*22);height:calc(var(--u)*22);border:1px solid var(--edge);border-radius:calc(var(--u)*6)}
.k-back .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.k-body{flex:1;min-height:0;display:flex}

/* the workspace sidebar */
.k-side{flex:none;width:calc(var(--u)*170);display:flex;flex-direction:column;gap:calc(var(--u)*1);padding:calc(var(--u)*10) calc(var(--u)*8);border-right:1px solid #454545;background:#1a1a1a;font-size:calc(var(--u)*11.5);color:var(--sub);overflow:hidden}
.k-side .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);color:var(--dim)}
.k-team{display:flex;align-items:center;gap:calc(var(--u)*7);height:calc(var(--u)*28);margin-bottom:calc(var(--u)*6);padding:0 calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*8);color:var(--ink);font-weight:600}
.k-team .w-cv{margin-left:auto}
.k-ln{flex:none;display:flex;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*6);white-space:nowrap}
.k-cl{color:var(--ink);font-weight:500}
.k-cl .ic{width:calc(var(--u)*10);height:calc(var(--u)*10)}
.k-ln.on{background:rgba(33,173,143,.12);color:var(--teal-hi)}
.k-ln.on .ic{color:var(--teal-hi)}
.k-badge{margin-left:auto;padding:0 calc(var(--u)*6);border-radius:calc(var(--u)*999);background:#b77b16;color:#1a1a1a;font:600 calc(var(--u)*10)/1.5 var(--sans);font-style:normal}
.k-lab{flex:none;display:flex;justify-content:space-between;white-space:nowrap;padding:calc(var(--u)*10) calc(var(--u)*8) calc(var(--u)*4);font:600 calc(var(--u)*9.5)/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.k-lab em{font-style:normal;letter-spacing:0;text-transform:none;font-family:var(--sans);font-weight:500;color:var(--sub)}
.k-hr{flex:none;height:1px;margin:calc(var(--u)*6) calc(var(--u)*6);background:#292929}

.k-main{flex:1;min-width:0;display:flex;flex-direction:column}
.k-tabs{flex:none;display:flex;gap:calc(var(--u)*2);height:calc(var(--u)*40);padding:0 calc(var(--u)*20);border-bottom:1px solid #454545;font-size:calc(var(--u)*12.5);color:var(--sub);white-space:nowrap}
.k-tabs span{display:flex;align-items:center;padding:0 calc(var(--u)*11);border-bottom:calc(var(--u)*2) solid transparent}
.k-tabs span.on{color:var(--ink);font-weight:600;border-bottom-color:var(--teal)}
.k-stage{position:relative;flex:1;min-height:0;overflow:hidden}

/* buttons drawn in the app */
.k-btn{display:inline-flex;align-items:center;gap:calc(var(--u)*7);height:calc(var(--u)*32);padding:0 calc(var(--u)*15);border-radius:calc(var(--u)*8);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*12.5);font-weight:600;white-space:nowrap}
.k-btn .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}

/* 0 and 1: the empty state */
.k-empty{--d:flex;position:absolute;inset:0;flex-direction:column;align-items:center;padding:calc(var(--u)*92) calc(var(--u)*40) 0;text-align:center}
.k-eico{width:calc(var(--u)*26);height:calc(var(--u)*26);color:var(--dim)}
.k-empty strong{margin-top:calc(var(--u)*14);font-size:calc(var(--u)*14.5);font-weight:600}
.k-empty p{max-width:calc(var(--u)*380);margin-top:calc(var(--u)*8);font-size:calc(var(--u)*12.5);line-height:1.6;color:var(--sub)}
.k-empty .k-btn{margin-top:calc(var(--u)*30)}

/* 1: the dialog over the whole app */
.k-veil{--d:block;position:absolute;inset:0;z-index:4;background:rgba(8,8,8,.62)}
.k-dlg{--d:flex;position:absolute;z-index:5;left:50%;top:calc(var(--u)*64);width:calc(var(--u)*470);margin-left:calc(var(--u)*-235);flex-direction:column;gap:calc(var(--u)*8);padding:calc(var(--u)*18) calc(var(--u)*18) calc(var(--u)*16);background:#292929;border:1px solid #454545;border-radius:calc(var(--u)*14);box-shadow:0 calc(var(--u)*24) calc(var(--u)*60) rgba(0,0,0,.55)}
.k-dh{margin-bottom:calc(var(--u)*6)}
.k-dh strong{display:block;font-size:calc(var(--u)*15);font-weight:600}
.k-dh small{display:block;margin-top:calc(var(--u)*3);font-size:calc(var(--u)*12);color:var(--sub)}
.k-pick{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid #1f6b5a;border-radius:calc(var(--u)*10);background:rgba(33,173,143,.06)}
.k-pick b{display:block;font-size:calc(var(--u)*12.5);font-weight:600}
.k-pick small{display:block;font-size:calc(var(--u)*11.5);color:var(--sub)}
.k-pick em{font-style:normal;font-size:calc(var(--u)*11);color:var(--teal-hi)}
.k-box{display:grid;place-items:center;width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*4);background:var(--teal);color:#fff}
.k-box .ic{width:calc(var(--u)*11);height:calc(var(--u)*11);stroke-width:2.6}
.k-tile{flex:none;display:grid;place-items:center;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:calc(var(--u)*7)}
.k-tile .ic{width:calc(var(--u)*14);height:calc(var(--u)*14)}
.k-gm{background:rgba(234,67,53,.14);color:#f28b82}
.k-sl{background:rgba(224,30,90,.14);color:#f59bbd}
.k-dr{background:rgba(66,133,244,.15);color:#8ab4f8}
.k-match{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*6);margin-top:calc(var(--u)*2);font-size:calc(var(--u)*11.5)}
.k-match small{width:100%;font-size:calc(var(--u)*11);color:var(--dim)}
.k-match span{padding:calc(var(--u)*3) calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*999);color:var(--ink)}
.k-dfoot{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--u)*10);margin-top:calc(var(--u)*8)}
.k-cancel{height:calc(var(--u)*32);display:inline-flex;align-items:center;padding:0 calc(var(--u)*14);border:1px solid var(--edge);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*12.5);color:var(--sub)}

/* 2: the compile */
.k-build{--d:block;height:100%;padding:calc(var(--u)*20) calc(var(--u)*28);overflow:hidden}
.k-bhead{display:flex;align-items:center;gap:calc(var(--u)*12)}
.k-bhead strong{display:block;font-size:calc(var(--u)*15);font-weight:600}
.k-bhead small{display:block;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*12);color:var(--sub)}
.k-pct{margin-left:auto;font:600 calc(var(--u)*12)/1 var(--sans);color:var(--teal-hi)}
.k-spin{width:calc(var(--u)*18);height:calc(var(--u)*18);color:var(--teal);stroke-width:2.4}
html.anim .k-spin{animation:k-turn 1s linear infinite} /* the one "working" pulse the frame allows */
@keyframes k-turn{to{transform:rotate(360deg)}}
.k-bar2{height:calc(var(--u)*5);margin:calc(var(--u)*14) 0 calc(var(--u)*14);border-radius:calc(var(--u)*3);background:#333333;overflow:hidden}
.k-bar2 s{display:block;width:68%;height:100%;background:var(--teal)}
html.anim .k-build.enter .k-bar2 s{animation:k-grow var(--motion-slow) var(--ease-out) both}
@keyframes k-grow{from{width:12%}}
.k-srcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*10)}
.k-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:calc(var(--u)*10);align-items:center;padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid #454545;border-radius:calc(var(--u)*10);background:#292929}
.k-src .k-tile{grid-row:1/3}
.k-src b{font-size:calc(var(--u)*12.5);font-weight:600}
.k-src small{grid-column:2;font-size:calc(var(--u)*11.5);color:var(--sub)}
.k-src>.ic{grid-column:3;grid-row:1/3}
.k-ok{color:var(--teal-hi);width:calc(var(--u)*15);height:calc(var(--u)*15)}
.k-lab2{margin:calc(var(--u)*18) 0 calc(var(--u)*8);font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.k-draft{--d:flex;gap:calc(var(--u)*10);align-items:flex-start;padding:calc(var(--u)*9) 0;border-top:1px solid #454545}
.k-draft p{font-size:calc(var(--u)*12.5);line-height:1.45}
.k-draft small{display:block;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*11);color:var(--dim)}
.k-dtag{flex:none;margin-top:calc(var(--u)*1);padding:calc(var(--u)*2) calc(var(--u)*7);border:1px dashed #454545;border-radius:calc(var(--u)*5);font:600 calc(var(--u)*9.5)/1.4 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
html.anim .k-draft.enter{animation-delay:calc(var(--i) * var(--motion-base))}
.k-aside{margin-top:calc(var(--u)*10);padding-top:calc(var(--u)*9);border-top:1px solid #454545;font-size:calc(var(--u)*11.5);color:#d9a55a}

/* 3 and 4: the finished knowledge page */
.k-face{--d:flex;height:100%}
.k-sub{flex:none;width:calc(var(--u)*164);display:flex;flex-direction:column;gap:calc(var(--u)*1);padding:calc(var(--u)*14) calc(var(--u)*8);border-right:1px solid #454545;font-size:calc(var(--u)*11.5);color:var(--sub);overflow:hidden}
.k-sub span{display:flex;justify-content:space-between;gap:calc(var(--u)*6);padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*6);white-space:nowrap}
.k-sub em{font-style:normal;color:var(--dim)}
.k-sub .on{background:#292929;color:var(--ink);font-weight:500}
.k-sub .k-amb,.k-sub .k-amb em{color:#e0a64e}
.k-sub .k-sl2{white-space:normal;align-items:baseline;margin-top:calc(var(--u)*10);font:600 calc(var(--u)*9.5)/1.3 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--dim)}
.k-sub .k-ind{padding-left:calc(var(--u)*16)}
.k-sub .k-gap{margin-top:calc(var(--u)*10)}
.k-doc{flex:1;min-width:0;padding:calc(var(--u)*14) calc(var(--u)*24) 0;overflow:hidden}
.k-meta{font-size:calc(var(--u)*11.5);color:var(--dim)}
.k-meta .k-amb{color:#e0a64e}
.k-ask{display:flex;gap:calc(var(--u)*8);margin-top:calc(var(--u)*10)}
.k-input{flex:1;min-width:0;height:calc(var(--u)*34);display:flex;align-items:center;padding:0 calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*8);background:#292929;font-size:calc(var(--u)*12);white-space:nowrap;overflow:hidden}
.k-ph{--d:inline;color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.k-typed{--d:inline;color:var(--ink)}
.k-askb{flex:none;display:grid;place-items:center;height:calc(var(--u)*34);padding:0 calc(var(--u)*18);border-radius:calc(var(--u)*8);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*12.5);font-weight:600}
.k-chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6);margin-top:calc(var(--u)*8)}
.k-chip{display:inline-flex;align-items:center;height:calc(var(--u)*24);padding:0 calc(var(--u)*10);border:1px solid #1f6b5a;border-radius:calc(var(--u)*999);background:rgba(33,173,143,.08);color:var(--teal-hi);font-size:calc(var(--u)*11.5)}
.w-kn[data-state="4"] .k-chip-fee{background:rgba(33,173,143,.22);color:var(--ink)}

/* trust labels, plain words */
.k-t{display:inline-flex;align-items:center;gap:calc(var(--u)*4);margin-left:calc(var(--u)*6);font-size:calc(var(--u)*11);font-weight:500;white-space:nowrap}
.k-t::before{content:"";width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:currentColor}
.k-t.ok{color:var(--teal-hi)}
.k-t.chk{color:#e0a64e}
.k-t.dis{color:#f08a7a}
.k-t.un{color:var(--dim)}

/* 4: the answer */
.k-ans{--d:block;margin-top:calc(var(--u)*12);padding:calc(var(--u)*12) calc(var(--u)*14);border:1px solid var(--edge);border-radius:calc(var(--u)*10);background:#292929}
.k-ans>p{font-size:calc(var(--u)*13);line-height:1.6;color:#f5f5f5}
.k-ans u{text-decoration:underline dotted;text-decoration-color:var(--teal);text-underline-offset:calc(var(--u)*3);color:var(--ink);font-weight:600}
.k-how{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u)*4) calc(var(--u)*12);margin-top:calc(var(--u)*8);font-size:calc(var(--u)*11.5)}
.k-how .k-t{margin-left:0}
.k-howl{color:var(--teal-hi);font-weight:500}
.k-tell{color:var(--dim)}
.k-cites{display:grid;gap:calc(var(--u)*6);margin-top:calc(var(--u)*10);padding:0;list-style:none}
.k-cites li{display:flex;gap:calc(var(--u)*10);align-items:flex-start;padding:calc(var(--u)*8) calc(var(--u)*10);border-radius:calc(var(--u)*8);background:#292929}
.k-cites b{display:block;font-size:calc(var(--u)*12);font-weight:600}
.k-cites small{display:block;font-size:calc(var(--u)*11);line-height:1.45;color:var(--sub)}
.k-cites .k-tile{width:calc(var(--u)*22);height:calc(var(--u)*22)}
.k-cites .k-tile .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}

/* 3: needs you (a real conflict) and the brand profile line */
.k-need{--d:block;margin-top:calc(var(--u)*10);padding:calc(var(--u)*8) calc(var(--u)*12);border:1px solid rgba(224,166,78,.42);border-radius:calc(var(--u)*10);background:rgba(224,166,78,.06)}
.k-nh{display:flex;flex-wrap:wrap;align-items:baseline;gap:calc(var(--u)*4) calc(var(--u)*10);margin-bottom:calc(var(--u)*6)}
.k-nh .k-t{margin-left:0}
.k-nh b{font-size:calc(var(--u)*12.5);font-weight:600}
.k-nh small{font-size:calc(var(--u)*11.5);color:var(--sub)}
.k-opt{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*10);padding:calc(var(--u)*4) 0;border-top:1px solid rgba(224,166,78,.18)}
.k-opt b{font-size:calc(var(--u)*12.5);font-weight:600;margin-right:calc(var(--u)*8)}
.k-opt small{font-size:calc(var(--u)*11);color:var(--sub)}
.k-ob{flex:none;height:calc(var(--u)*24);display:inline-flex;align-items:center;padding:0 calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*11.5);color:var(--ink)}
.k-prof{--d:flex;display:flex;align-items:baseline;gap:calc(var(--u)*10);margin-top:calc(var(--u)*10);padding:calc(var(--u)*9) calc(var(--u)*12);border:1px solid #454545;border-radius:calc(var(--u)*10);font-size:calc(var(--u)*11.5);color:var(--sub)}
.k-prof b{flex:none;font-size:calc(var(--u)*12.5);font-weight:600;color:var(--ink)}
.k-prof span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-prof em{flex:none;font-style:normal;color:var(--teal-hi)}

/* key facts */
.k-fh{display:flex;align-items:baseline;gap:calc(var(--u)*10);margin-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*4);font-size:calc(var(--u)*13);font-weight:600}
.k-fh small{font-size:calc(var(--u)*11);font-weight:400;color:var(--dim)}
.k-f{padding:calc(var(--u)*6) 0;border-top:1px solid #454545}
.k-f p{font-size:calc(var(--u)*12.5);line-height:1.4}
.k-f small{display:block;margin-top:calc(var(--u)*2);font-size:calc(var(--u)*11);color:var(--dim)}

/* ── 5: a chat job for Tern Coffee ── */
.k-chat{--d:flex;flex:1;min-width:0;min-height:0}
.k-chat .w-toolline{display:inline-flex}

/* ── narrow screens: the window is 430 design units wide; the sidebar and the page's own nav step aside ── */
@media (max-width:899px){
  .fit .w-kn{--dh:760}
  .k-side,.k-sub,.k-sun,.k-bld,.k-sg,.k-tabs .k-tn{display:none}
  .k-bar{gap:calc(var(--u)*8);padding:0 calc(var(--u)*10)}
  .k-bar .w-scope{margin-left:auto}
  .k-bar .w-av{margin-left:0}
  .k-tabs{padding:0 calc(var(--u)*8)}
  .k-tabs span{padding:0 calc(var(--u)*9)}
  .k-empty{padding:calc(var(--u)*80) calc(var(--u)*24) 0}
  .k-dlg{left:calc(var(--u)*12);right:calc(var(--u)*12);width:auto;margin-left:0;top:calc(var(--u)*56)}
  .k-build{padding:calc(var(--u)*16) calc(var(--u)*16)}
  .k-srcs{grid-template-columns:minmax(0,1fr);gap:calc(var(--u)*6)}
  .k-src{padding:calc(var(--u)*7) calc(var(--u)*10)}
  .k-doc{padding:calc(var(--u)*12) calc(var(--u)*14) 0}
  .k-meta{display:none}
  .k-ask{margin-top:0}
  .k-opt{align-items:flex-start}
  .k-opt small{display:block}
  .k-prof{flex-wrap:wrap}
  .k-prof span{white-space:normal;flex-basis:100%;order:3}
  .k-prof em{margin-left:auto}
}