/* generated by cogmenta/design @ 16563c8 — do not edit here; change it in the design repo and re-sync */
/* Cogmenta component library — UI + AX (agent experience) components.
   Theme-agnostic: every value comes from --cg-* tokens. Load one of:
     products/<product>/<product>-tokens.css            (single-product app)
     products/cogmenta-products.css + <html data-product="…">   (shared codebase)
   Naming: .cg-* = general UI · .ax-* = AI/agent interaction patterns. */

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--cg-font-body);font-size:var(--cg-text-md);color:var(--cg-fg);background:var(--cg-bg);line-height:var(--cg-leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--cg-font-display);font-weight:600;letter-spacing:var(--cg-tracking-display);line-height:var(--cg-leading-tight);margin:0}
/* Korean (DESIGN.md §2.3): whole-word line breaks, 1.7 body and editorial leading, no negative tracking on Hangul.
   Set as tokens so every component that reads them follows, not only body and headings. */
:lang(ko){word-break:keep-all;overflow-wrap:break-word;--cg-leading-body:1.7;--cg-leading-editorial:1.7;--cg-tracking-display:0}
p{margin:0}
a{color:var(--cg-link);text-underline-offset:2px}
/* specificity of a bare `a` (0,0,1): beats the base link colour by source order, loses to a.cg-btn / .cg-nav / .cg-tab */
a:where(:hover){color:var(--cg-link-hover)}
:focus-visible{outline:2px solid var(--cg-focus);outline-offset:2px}

/* ---------- primitives ---------- */
.cg-label{font-family:var(--cg-font-label);font-size:var(--cg-text-2xs);font-weight:500;letter-spacing:var(--cg-tracking-label);text-transform:uppercase;color:var(--cg-fg-muted)}
/* product names keep their casing inside uppercase labels, badges and bylines: <span class="cg-brand">LoOP</span> */
.cg-brand{text-transform:none}
.cg-mono{font-family:var(--cg-font-mono);font-size:.92em}
.cg-muted{color:var(--cg-fg-muted)}
.cg-row{display:flex;align-items:center;gap:var(--cg-space-2)}
.cg-stack{display:flex;flex-direction:column;gap:var(--cg-space-3)}
.cg-spacer{flex:1}

.cg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--cg-control-h);padding:0 16px;border-radius:var(--cg-radius-md);
  font-family:var(--cg-font-display);font-weight:600;font-size:var(--cg-text-sm);background:var(--cg-primary);color:var(--cg-primary-fg);border:1.5px solid var(--cg-primary);
  cursor:pointer;text-decoration:none;white-space:nowrap;transition:filter var(--cg-dur-fast) var(--cg-ease),background var(--cg-dur-fast) var(--cg-ease)}
.cg-btn:hover{filter:brightness(1.12)}
.cg-btn--outline{background:transparent;color:var(--cg-fg);border-color:var(--cg-border)}
.cg-btn--outline:hover{background:var(--cg-bg-subtle);filter:none}
.cg-btn--ghost{background:transparent;border-color:transparent;color:var(--cg-fg-muted)}
.cg-btn--ghost:hover{background:var(--cg-bg-subtle);color:var(--cg-fg);filter:none}
.cg-btn--danger{background:transparent;border-color:var(--cg-danger);color:var(--cg-danger)}
.cg-btn--sm{height:calc(var(--cg-control-h) - 8px);padding:0 10px;font-size:12px}
.cg-btn[disabled]{opacity:.45;cursor:not-allowed}
/* busy: keeps its colour, shows a .cg-loader--sm before the label, ignores further clicks */
.cg-btn[aria-busy="true"]{pointer-events:none}
.cg-btn svg{width:16px;height:16px;flex:none}

.cg-input,.cg-select{height:var(--cg-control-h);width:100%;padding:0 12px;border-radius:var(--cg-radius-md);border:1px solid var(--cg-border);background:var(--cg-surface);color:var(--cg-fg);font:inherit;font-size:var(--cg-text-sm)}
.cg-input::placeholder{color:var(--cg-fg-muted)}
.cg-field{display:flex;flex-direction:column;gap:6px}
.cg-field small{color:var(--cg-fg-muted);font-size:12px}

.cg-card{background:var(--cg-surface);border:1px solid var(--cg-border);border-radius:var(--cg-radius-lg);padding:var(--cg-space-4);box-shadow:var(--cg-shadow-sm)}
.cg-card--raised{box-shadow:var(--cg-shadow-md)}
.cg-card__title{font-family:var(--cg-font-display);font-weight:600;font-size:var(--cg-text-md)}

.cg-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--cg-radius-pill);border:1px solid var(--cg-border);background:var(--cg-surface);font-size:12px;color:var(--cg-fg-muted);white-space:nowrap}
.cg-chip--accent{background:var(--cg-accent-soft);border-color:transparent;color:var(--cg-accent-text)}
.cg-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--cg-font-label);font-size:var(--cg-text-2xs);font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:var(--cg-radius-sm);border:1px solid currentColor}
.cg-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.cg-badge--success{color:var(--cg-success)}.cg-badge--warning{color:var(--cg-warning)}.cg-badge--danger{color:var(--cg-danger)}.cg-badge--info{color:var(--cg-info)}.cg-badge--neutral{color:var(--cg-fg-muted)}

.cg-kbd{font-family:var(--cg-font-mono);font-size:var(--cg-text-2xs);padding:1px 6px;border:1px solid var(--cg-border);border-bottom-width:2px;border-radius:var(--cg-radius-sm);color:var(--cg-fg-muted);background:var(--cg-surface)}

.cg-table{width:100%;border-collapse:collapse;font-size:var(--cg-text-sm)}
.cg-table th{text-align:left;font-family:var(--cg-font-label);font-size:var(--cg-text-2xs);font-weight:500;letter-spacing:var(--cg-tracking-label);text-transform:uppercase;color:var(--cg-fg-muted);padding:8px 12px;border-bottom:1px solid var(--cg-border)}
.cg-table td{padding:10px 12px;border-bottom:1px solid var(--cg-border);vertical-align:middle}
.cg-table tr:hover td{background:var(--cg-bg-subtle)}
.cg-num{font-variant-numeric:tabular-nums;text-align:right}

.cg-tabs{display:flex;gap:var(--cg-space-4);border-bottom:1px solid var(--cg-border)}
.cg-tab{padding:10px 2px;font-size:var(--cg-text-sm);color:var(--cg-fg-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;text-decoration:none}
button.cg-tab{border:0;border-bottom:2px solid transparent;background:none;font-family:inherit;cursor:pointer}
.cg-tab[aria-selected="true"]{color:var(--cg-fg);border-color:var(--cg-accent);font-weight:500}

.cg-stat{display:flex;flex-direction:column;gap:4px}
.cg-stat__value{font-family:var(--cg-font-display);font-weight:600;font-size:var(--cg-text-xl);letter-spacing:var(--cg-tracking-display);font-variant-numeric:tabular-nums}
.cg-stat__delta{font-size:12px;color:var(--cg-success)}

.cg-empty{display:flex;flex-direction:column;align-items:center;gap:var(--cg-space-3);text-align:center;padding:var(--cg-space-12) var(--cg-space-6);color:var(--cg-fg-muted);border:1px dashed var(--cg-border);border-radius:var(--cg-radius-lg)}
.cg-toast{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--cg-radius-md);background:var(--cg-fg);color:var(--cg-bg);font-size:var(--cg-text-sm);box-shadow:var(--cg-shadow-md)}

/* ---------- app shell ---------- */
.cg-app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.cg-sidebar{background:var(--cg-bg-subtle);border-right:1px solid var(--cg-border);padding:var(--cg-space-4);display:flex;flex-direction:column;gap:var(--cg-space-1)}
.cg-nav{display:flex;align-items:center;gap:10px;height:var(--cg-control-h);padding:0 10px;border-radius:var(--cg-radius-md);color:var(--cg-fg-muted);font-size:var(--cg-text-sm);text-decoration:none}
.cg-nav svg{width:18px;height:18px;flex:none}
button.cg-nav{width:100%;border:0;background:none;font-family:inherit;text-align:left;cursor:pointer}
.cg-nav:hover{background:var(--cg-surface);color:var(--cg-fg)}
.cg-nav[aria-current="page"]{background:var(--cg-surface);color:var(--cg-fg);font-weight:500;box-shadow:inset 2px 0 0 var(--cg-accent)}
.cg-topbar{display:flex;align-items:center;gap:var(--cg-space-3);height:56px;padding:0 var(--cg-space-6);border-bottom:1px solid var(--cg-border);background:var(--cg-bg)}
.cg-main{padding:var(--cg-space-6);display:flex;flex-direction:column;gap:var(--cg-space-6);min-width:0}

/* ---------- loading — the default loader (motion/MOTION.md) ----------
   The Co mark with both loops turning: outer loop + arrowhead one lap per --cg-loop-lap-outer, the inner ring
   two laps in the same time. CSS only, no SVG markup or innerHTML:
     <span class="cg-loading" role="status"><span class="cg-loader" aria-hidden="true"></span>Loading 14 matters…</span>
   Every loading state in every product uses it. Inside buttons and toasts it turns monochrome (currentColor). */
.cg-loader{--cg-loader-size:22px;position:relative;display:inline-block;flex:none;width:var(--cg-loader-size);height:var(--cg-loader-size);vertical-align:middle}
.cg-loader::before,.cg-loader::after,.ax-step[data-status="running"] .ax-step__dot::before,.ax-step[data-status="running"] .ax-step__dot::after{content:"";position:absolute;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* outer loop + arrowhead: the whole 240-unit mark box, turning about the loop centre (120,120) */
.cg-loader::before,.ax-step[data-status="running"] .ax-step__dot::before{inset:0;background:var(--cg-loop-outer);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M174.5 203.9A100 100 0 1 1 196.6 55.7' fill='none' stroke='black' stroke-width='14'/%3E%3Cpath d='M206 45.2L184.6 63.2L209.5 71z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M174.5 203.9A100 100 0 1 1 196.6 55.7' fill='none' stroke='black' stroke-width='14'/%3E%3Cpath d='M206 45.2L184.6 63.2L209.5 71z'/%3E%3C/svg%3E");animation:ax-spin var(--cg-loop-lap-outer,4.8s) linear infinite}
/* inner ring (r36, centre 172,168) in its own 86-unit box, turning about its own centre */
.cg-loader::after,.ax-step[data-status="running"] .ax-step__dot::after{left:53.75%;top:52.0833%;width:35.8333%;height:35.8333%;background:var(--cg-loop-inner);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Ccircle cx='43' cy='43' r='36' fill='none' stroke='black' stroke-width='14' stroke-dasharray='170 56'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 86 86'%3E%3Ccircle cx='43' cy='43' r='36' fill='none' stroke='black' stroke-width='14' stroke-dasharray='170 56'/%3E%3C/svg%3E");animation:ax-spin var(--cg-loop-lap-inner,2.4s) linear infinite}
.cg-loading{display:inline-flex;align-items:center;gap:var(--cg-space-2);font-size:var(--cg-text-sm);color:var(--cg-fg-muted)}
.cg-loading--block{display:flex;flex-direction:column;justify-content:center;gap:var(--cg-space-3);width:100%;min-height:160px;padding:var(--cg-space-8) var(--cg-space-4);text-align:center}
:where(.cg-loading--block) .cg-loader{--cg-loader-size:40px}
/* sizes come after the block default so an explicit size always wins */
.cg-loader--sm{--cg-loader-size:16px}
.cg-loader--lg{--cg-loader-size:40px}
.cg-loader--xl{--cg-loader-size:72px}
.cg-loader--mono,.cg-btn .cg-loader,.cg-toast .cg-loader{--cg-loop-outer:currentColor;--cg-loop-inner:currentColor}

/* =====================================================================
   AX — agent experience patterns
   ===================================================================== */

/* AX-01 Loop status — the two rings ARE the system status. Never use a generic spinner; for loading use .cg-loader above. */
.ax-loop{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--cg-fg-muted)}
.ax-loop svg{width:22px;height:22px;flex:none;overflow:visible}
.ax-loop .o{fill:none;stroke:var(--cg-loop-outer);stroke-width:14;transform-origin:120px 120px}
.ax-loop .i{fill:none;stroke:var(--cg-loop-inner);stroke-width:14;transform-origin:172px 168px}
.ax-loop .tip{fill:var(--cg-loop-outer);transform-origin:120px 120px}
.ax-loop[data-state="thinking"] .i{stroke-dasharray:170 56;animation:ax-spin var(--cg-loop-lap-inner) linear infinite}
.ax-loop[data-state="learning"] .o,.ax-loop[data-state="learning"] .tip{animation:ax-spin var(--cg-loop-lap-outer) linear infinite}
.ax-loop[data-state="learning"] .i{stroke-dasharray:170 56;animation:ax-spin var(--cg-loop-lap-inner) linear infinite}
.ax-loop[data-state="needs-you"] .i{animation:ax-pulse 1.6s ease-in-out infinite}
.ax-loop[data-state="needs-you"]{color:var(--cg-accent-text);font-weight:500}
.ax-loop[data-state="paused"] svg{opacity:.4}
.ax-loop--lg svg{width:40px;height:40px}
@keyframes ax-spin{to{transform:rotate(360deg)}}
@keyframes ax-pulse{50%{opacity:.35}}

/* AX-02 AI output block — AI-authored content is always marked with the inner-loop rail */
.ax-output{position:relative;background:var(--cg-surface);border:1px solid var(--cg-border);border-left:3px solid var(--cg-ai);border-radius:var(--cg-radius-md);padding:var(--cg-space-4)}
.ax-output__head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.ax-output__body{font-family:var(--cg-font-editorial);font-size:var(--cg-text-md);line-height:var(--cg-leading-editorial,1.6)}
.ax-output__foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--cg-border)}
.ax-by{font-family:var(--cg-font-label);font-size:var(--cg-text-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--cg-accent-text)}
.ax-by--human{color:var(--cg-fg)}

/* AX-03 Source / provenance chip */
.ax-source{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:var(--cg-radius-sm);background:var(--cg-bg-subtle);font-size:12px;color:var(--cg-fg);text-decoration:none;border:1px solid transparent}
.ax-source:hover{border-color:var(--cg-accent)}
.ax-source b{font-family:var(--cg-font-mono);font-weight:500;color:var(--cg-accent-text)}
mark.ax-cite{background:var(--cg-accent-soft);color:inherit;padding:0 2px;border-radius:2px}

/* AX-04 Evidence meter — grounded / partial / ungrounded. Never a bare percentage. */
.ax-evidence{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--cg-fg-muted)}
.ax-evidence i{display:inline-block;width:14px;height:4px;border-radius:2px;background:var(--cg-border);margin-right:2px}
.ax-evidence[data-level="3"] i{background:var(--cg-success)}
.ax-evidence[data-level="2"] i:nth-child(-n+2){background:var(--cg-warning)}
.ax-evidence[data-level="1"] i:nth-child(1){background:var(--cg-danger)}

/* AX-05 Correction capture — the diff is the training signal; make it effortless */
.ax-diff{font-family:var(--cg-font-editorial);line-height:1.7}
.ax-diff del{background:color-mix(in srgb,var(--cg-danger) 14%,transparent);color:var(--cg-fg-muted);text-decoration-color:var(--cg-danger)}
.ax-diff ins{background:color-mix(in srgb,var(--cg-success) 16%,transparent);text-decoration:none;border-bottom:1.5px solid var(--cg-success)}
.ax-correct{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-radius:var(--cg-radius-md);background:var(--cg-bg-subtle)}
.ax-reason{display:flex;flex-wrap:wrap;gap:6px}
.ax-reason .cg-chip{cursor:pointer}
.ax-reason .cg-chip[aria-pressed="true"]{background:var(--cg-fg);color:var(--cg-bg);border-color:var(--cg-fg)}

/* AX-06 Approval gate — irreversible / external actions stop here */
.ax-gate{border:1.5px solid var(--cg-warning);border-radius:var(--cg-radius-lg);background:color-mix(in srgb,var(--cg-warning) 7%,var(--cg-surface));padding:var(--cg-space-4);display:flex;flex-direction:column;gap:var(--cg-space-3)}
.ax-gate__what{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:var(--cg-text-sm)}
.ax-gate__what dt{color:var(--cg-fg-muted)}.ax-gate__what dd{margin:0}

/* AX-07 Agent run timeline */
.ax-timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ax-step{display:grid;grid-template-columns:20px 1fr auto;gap:12px;padding:0 0 16px;position:relative;font-size:var(--cg-text-sm)}
.ax-step::before{content:"";position:absolute;left:9px;top:18px;bottom:0;width:2px;background:var(--cg-border)}
.ax-step:last-child::before{display:none}
.ax-step__dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--cg-border);background:var(--cg-surface);display:grid;place-items:center;font-size:var(--cg-text-2xs)}
.ax-step[data-status="done"] .ax-step__dot{border-color:var(--cg-loop-outer);background:var(--cg-loop-outer);color:var(--cg-bg)}
/* a running step shows the default loader (above), not a generic ring */
.ax-step[data-status="running"] .ax-step__dot{position:relative;border:0;background:var(--cg-surface);color:transparent}
.ax-step[data-status="waiting"] .ax-step__dot{border-color:var(--cg-warning);color:var(--cg-warning)}
.ax-step[data-status="failed"] .ax-step__dot{border-color:var(--cg-danger);color:var(--cg-danger)}
.ax-step__meta{font-family:var(--cg-font-mono);font-size:var(--cg-text-2xs);color:var(--cg-fg-muted)}
.ax-step details{margin-top:6px}.ax-step summary{cursor:pointer;color:var(--cg-fg-muted);font-size:12px}
.ax-step pre{margin:6px 0 0;padding:8px 10px;background:var(--cg-bg-subtle);border-radius:var(--cg-radius-sm);font-family:var(--cg-font-mono);font-size:var(--cg-text-2xs);overflow:auto}

/* AX-08 Recording indicator — always visible while capturing, one action to pause */
.ax-rec{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 8px;border-radius:var(--cg-radius-pill);border:1px solid color-mix(in srgb,var(--cg-rec) 45%,transparent);background:color-mix(in srgb,var(--cg-rec) 8%,var(--cg-surface));font-size:12px;color:var(--cg-fg)}
.ax-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cg-rec);animation:ax-pulse 1.4s ease-in-out infinite}
.ax-rec[data-state="paused"]{border-color:var(--cg-border);background:var(--cg-surface);color:var(--cg-fg-muted)}
.ax-rec[data-state="paused"]::before{background:var(--cg-fg-muted);animation:none;border-radius:1px}
.ax-rec time{font-family:var(--cg-font-mono);font-size:var(--cg-text-2xs);color:var(--cg-fg-muted)}

/* AX-09 Memory card (Cogmind) — what the system remembers, where it came from, editable */
.ax-memory{display:grid;grid-template-columns:auto 1fr auto;gap:4px 12px;align-items:start;padding:12px;border:1px solid var(--cg-border);border-radius:var(--cg-radius-md);background:var(--cg-surface);font-size:var(--cg-text-sm)}
.ax-memory__layer{grid-row:span 2;font-family:var(--cg-font-mono);font-size:var(--cg-text-2xs);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:var(--cg-radius-sm);background:var(--cg-accent-soft);color:var(--cg-accent-text);align-self:start}
.ax-memory__meta{grid-column:2;font-size:12px;color:var(--cg-fg-muted)}

/* AX-10 Learned receipt — close the loop visibly after every correction */
.ax-learned{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--cg-radius-md);background:var(--cg-accent-soft);font-size:var(--cg-text-sm)}
.ax-learned strong{color:var(--cg-accent-text)}

/* AX-11 Autonomy dial */
.ax-autonomy{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--cg-border);border-radius:var(--cg-radius-md);overflow:hidden;background:var(--cg-surface)}
.ax-autonomy button{all:unset;cursor:pointer;padding:10px 12px;font-size:12px;color:var(--cg-fg-muted);border-right:1px solid var(--cg-border);display:flex;flex-direction:column;gap:2px}
.ax-autonomy button:last-child{border-right:0}
.ax-autonomy button b{font-family:var(--cg-font-display);font-size:13px;color:var(--cg-fg)}
.ax-autonomy button[aria-pressed="true"]{background:var(--cg-accent-soft);box-shadow:inset 0 -2px 0 var(--cg-accent)}

/* AX-12 Sovereignty status — where the data is, stated plainly */
.ax-sovereign{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--cg-fg-muted)}
.ax-sovereign::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--cg-success)}

/* AX-13 Prompt / ask bar */
.ax-ask{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--cg-border);border-radius:var(--cg-radius-lg);background:var(--cg-surface);box-shadow:var(--cg-shadow-sm)}
.ax-ask:focus-within{border-color:var(--cg-accent)}
.ax-ask input{all:unset;flex:1;font-size:var(--cg-text-sm);min-width:0}

@media (prefers-reduced-motion:reduce){.ax-loop *,.ax-step__dot,.ax-step__dot::before,.ax-step__dot::after,.ax-rec::before,.cg-loader::before,.cg-loader::after{animation:none!important}}
@media (max-width:760px){.cg-app{grid-template-columns:1fr}.cg-sidebar{display:none}.ax-autonomy{grid-template-columns:1fr 1fr}}