/* High-fidelity Adaptum product views for the landing mockup.
   Anatomy follows the real product widgets (window chrome, Contacts table, Ai chat, task board,
   Data Vault record, Memory manager). Colours are the Adaptum theme applied through the product's
   theme system; Lexend is the product's own UI face. Illustrative fixtures, not live data. */
.app { --a-bg: #F3F1EC; --a-card: #FFFFFF; --a-ink: #18253B; --a-ink-2: #3B475B; --a-muted: #6B7587; --a-faint: #9AA2B1;
  --a-line: #E7E3DA; --a-line-2: #EFECE6; --a-primary: #124D3E; --a-primary-soft: #E3EEEA; --a-primary-tint: #F1F6F4;
  --a-amber: #B7791F; --a-amber-soft: #FBF1E0; --a-slate-soft: #EEF0F4;
  font: 400 13px/1.45 "Lexend", "Inter", system-ui, sans-serif; color: var(--a-ink); -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; }
.app * { box-sizing: border-box; }

/* App frame */
.app-frame { width: 1200px; background: var(--a-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 50px 120px -40px rgb(8 15 28 / .65), 0 18px 40px -20px rgb(8 15 28 / .35); }
.app-top { height: 46px; background: var(--a-ink); display: flex; align-items: center; gap: 16px; padding: 0 16px; color: #E9E4DA; }
.app-top .lg { width: 92px; }
.app-top .ws { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgb(255 255 255 / .07); font-size: 12px; }
.app-top .ws i { width: 7px; height: 7px; border-radius: 50%; background: #5FB49B; }
.app-top .tabs { display: flex; gap: 2px; font-size: 12px; }
.app-top .tabs span { padding: 5px 10px; border-radius: 7px; color: rgb(233 228 218 / .62); }
.app-top .tabs span.on { background: rgb(255 255 255 / .1); color: #fff; }
.app-top .search { margin-left: auto; width: 230px; height: 28px; border-radius: 8px; background: rgb(255 255 255 / .07); display: flex; align-items: center; padding: 0 10px; font-size: 12px; color: rgb(233 228 218 / .5); justify-content: space-between; }
.app-top .search kbd { font: 500 10px/1 "Lexend"; padding: 3px 5px; border-radius: 4px; background: rgb(255 255 255 / .1); }
.app-top .me { width: 26px; height: 26px; border-radius: 50%; background: #E8DCC8; color: var(--a-ink); font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.canvas { position: relative; padding: 14px; display: grid; gap: 14px; }

/* Widget window */
.w { background: var(--a-card); border-radius: 12px; border: 1px solid var(--a-line); box-shadow: 0 1px 2px rgb(24 37 59 / .05), 0 8px 24px -16px rgb(24 37 59 / .25); overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.w-h { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--a-line-2); flex: none; }
.w-h .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--a-primary-soft); color: var(--a-primary); display: grid; place-items: center; }
.w-h .ic svg { width: 13px; height: 13px; }
.w-h b { font-weight: 500; font-size: 13px; }
.w-h .ctl { margin-left: auto; display: flex; gap: 5px; }
.w-h .ctl i { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--a-line); display: block; position: relative; }
.w-h .ctl i::after { content: ""; position: absolute; left: 6px; right: 6px; top: 9px; height: 1px; background: var(--a-faint); }
.w-h .ctl i:first-child::after { left: 9px; right: auto; width: 1px; top: 5px; height: 1px; box-shadow: 0 3px 0 var(--a-faint), 0 6px 0 var(--a-faint); background: var(--a-faint); }
.w-b { padding: 12px; min-height: 0; flex: 1; overflow: hidden; }

/* Controls */
.filters { display: flex; gap: 8px; margin-bottom: 10px; }
.sel { height: 30px; border: 1px solid var(--a-line); border-radius: 8px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--a-muted); min-width: 92px; }
.sel.on { border-color: #9DC1B5; background: var(--a-primary-tint); color: var(--a-primary); }
.sel::after { content: ""; width: 0; height: 0; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); opacity: .7; }
.sel.search { flex: 1; } .sel.search::after { display: none; }
.btn-new { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--a-primary); color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-weight: 500; font-size: 11px; color: var(--a-muted); padding: 6px 8px; border-bottom: 1px solid var(--a-line-2); }
.tbl td { padding: 7px 8px; border-bottom: 1px solid var(--a-line-2); vertical-align: middle; white-space: nowrap; }
.tbl tr.sel-row td { background: var(--a-primary-tint); }
.who { display: flex; align-items: center; gap: 9px; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 600; flex: none; color: var(--a-ink); }
.av.sq { border-radius: 7px; }
.who small { display: block; color: var(--a-muted); font-size: 11px; line-height: 1.2; }
.who span { line-height: 1.25; }
.pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.score { display: inline-block; min-width: 28px; text-align: center; padding: 2px 6px; border-radius: 6px; background: var(--a-slate-soft); font-size: 11px; font-weight: 500; }
.w-foot { border-top: 1px solid var(--a-line-2); padding: 7px 12px; font-size: 11px; color: var(--a-muted); display: flex; justify-content: space-between; flex: none; }

/* Chat */
.chat { display: flex; flex-direction: column; gap: 12px; }
.msg-u { align-self: flex-end; max-width: 82%; background: var(--a-ink); color: #F4EDE1; border-radius: 14px 14px 4px 14px; padding: 10px 13px; font-size: 13px; }
.ctx { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-top: -6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px 0 6px; border-radius: 7px; background: var(--a-card); border: 1px solid var(--a-line); font-size: 11px; color: var(--a-ink-2); }
.chip b { width: 14px; height: 14px; border-radius: 4px; display: grid; place-items: center; font-size: 8px; font-weight: 700; color: #fff; background: var(--a-primary); }
.chip b.d { background: #3B5B8A; } .chip b.p { background: #8A5A12; }
.msg-a { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 14px; padding: 12px 14px; font-size: 13px; }
.msg-a .by { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 500; font-size: 12px; }
.msg-a .by img { width: 22px; }
.msg-a ol { margin: 6px 0 8px; padding-left: 18px; } .msg-a li { margin-bottom: 5px; color: var(--a-ink-2); }
.msg-a li b { color: var(--a-ink); font-weight: 500; }
.src { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 5px; background: var(--a-slate-soft); font-size: 10px; color: var(--a-muted); vertical-align: 1px; margin-left: 3px; }
.saved { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 9px; background: var(--a-primary-tint); color: var(--a-primary); font-size: 12px; }
.composer { margin-top: auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--a-line); border-radius: 12px; padding: 7px 7px 7px 12px; color: var(--a-faint); font-size: 12.5px; }
.composer .r { margin-left: auto; display: flex; gap: 6px; }
.composer .r i { width: 26px; height: 26px; border-radius: 50%; background: var(--a-slate-soft); display: block; }
.composer .r i.go { background: var(--a-primary); }

/* Board */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.col h6 { margin: 0 0 8px; font: 500 11px/1 "Lexend"; color: var(--a-muted); display: flex; justify-content: space-between; }
.card { background: var(--a-card); border: 1px solid var(--a-line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; box-shadow: 0 1px 2px rgb(24 37 59 / .04); }
.card .t { font-size: 12px; font-weight: 500; line-height: 1.3; margin-bottom: 7px; }
.card .m { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--a-muted); }
.card .m .av { width: 18px; height: 18px; font-size: 8px; margin-left: auto; }
.prio { width: 7px; height: 7px; border-radius: 2px; background: var(--a-amber); }
.prio.lo { background: #9DC1B5; }

/* Record / vault */
.rec-h { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--a-line-2); }
.rec-h .av { width: 40px; height: 40px; font-size: 14px; }
.rec-h h4 { margin: 0; font-weight: 500; font-size: 16px; }
.rec-h p { margin: 0; color: var(--a-muted); font-size: 12px; }
.rec-tabs { display: flex; gap: 16px; font-size: 12px; color: var(--a-muted); border-bottom: 1px solid var(--a-line-2); margin-bottom: 10px; }
.rec-tabs span { padding: 9px 0; } .rec-tabs span.on { color: var(--a-primary); box-shadow: inset 0 -2px 0 var(--a-primary); }
.rel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rel-box { border: 1px solid var(--a-line); border-radius: 10px; padding: 10px; }
.rel-box h6 { margin: 0 0 8px; font: 500 11px/1 "Lexend"; color: var(--a-muted); display: flex; justify-content: space-between; }
.row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--a-line-2); font-size: 12px; }
.row:first-of-type { border-top: 0; }
.row .kv { margin-left: auto; color: var(--a-muted); font-size: 11px; }
.doc { width: 22px; height: 26px; border-radius: 4px; background: #EEF2F8; border: 1px solid #D9E1EE; position: relative; flex: none; }
.doc::after { content: ""; position: absolute; left: 5px; right: 5px; top: 8px; height: 1px; background: #B6C2D6; box-shadow: 0 4px 0 #B6C2D6, 0 8px 0 #B6C2D6; }
.tl { position: relative; padding-left: 16px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: var(--a-line); }
.tl .row { border: 0; padding: 5px 0; } .tl .row::before { content: ""; position: absolute; left: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--a-card); border: 1.5px solid var(--a-primary); }
.ai-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--a-primary); }
.ai-toggle i { width: 24px; height: 14px; border-radius: 999px; background: var(--a-primary); position: relative; }
.ai-toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.ai-toggle.off { color: var(--a-faint); } .ai-toggle.off i { background: #D5D9E0; } .ai-toggle.off i::after { right: auto; left: 2px; }

/* Memory */
.mem { border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.mem p { margin: 0; font-size: 12.5px; color: var(--a-ink); }
.mem small { color: var(--a-muted); font-size: 11px; }
.mem .acts { grid-row: span 2; display: flex; gap: 6px; align-items: center; }
.mem .acts span { height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--a-line); font-size: 11px; display: grid; place-items: center; color: var(--a-ink-2); }
.mem.edit { border-color: #9DC1B5; background: var(--a-primary-tint); }
.mem.edit p { box-shadow: inset 0 -1px 0 #9DC1B5; }
.mem.gone { opacity: .45; } .mem.gone p { text-decoration: line-through; }

/* Models and usage */
.seg { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--a-slate-soft); font-size: 11.5px; }
.seg span { padding: 5px 10px; border-radius: 7px; color: var(--a-muted); }
.seg span.on { background: var(--a-card); color: var(--a-ink); box-shadow: 0 1px 2px rgb(24 37 59 / .08); }
.model { display: flex; align-items: center; gap: 8px; }
.model .mk { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 9px; font-weight: 700; color: #fff; flex: none; }
.model small { display: block; color: var(--a-muted); font-size: 10.5px; line-height: 1.2; }
.where { font-size: 11px; color: var(--a-ink-2); display: inline-flex; align-items: center; gap: 5px; }
.where i { width: 6px; height: 6px; border-radius: 50%; background: #8A93A3; }
.where.priv i { background: var(--a-primary); }
.usage { display: grid; gap: 11px; }
.usage .u { display: grid; grid-template-columns: 112px 1fr 64px; align-items: center; gap: 10px; font-size: 12px; }
.usage .u .kv { text-align: right; color: var(--a-muted); font-size: 11px; }
.meter { position: relative; height: 8px; border-radius: 999px; background: var(--a-slate-soft); }
.meter b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--a-primary); }
.meter b.warn { background: var(--a-amber); }
.meter::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: var(--cap, 85%); width: 1.5px; background: var(--a-ink); opacity: .35; }
.stat { border: 1px solid var(--a-line); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.stat small { color: var(--a-muted); font-size: 11px; }

/* Redaction */
.flow { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; gap: 0; }
.pane { border: 1px solid var(--a-line); border-radius: 12px; padding: 12px 13px; background: var(--a-card); }
.pane h6 { margin: 0 0 9px; font: 500 11px/1 "Lexend"; color: var(--a-muted); display: flex; justify-content: space-between; align-items: center; }
.pane p { margin: 0; font-size: 12.5px; line-height: 1.65; color: var(--a-ink); }
.pane.out { background: #FCFBF9; }
.hl { background: #FBEBD9; box-shadow: inset 0 -1.5px 0 #E2A863; border-radius: 3px; padding: 0 2px; }
.tok { font: 500 10.5px/1 "JetBrains Mono", monospace; background: var(--a-ink); color: #F4EDE1; border-radius: 4px; padding: 2px 5px; white-space: nowrap; }
.arrow { display: grid; place-items: center; color: var(--a-primary); }
.arrow svg { width: 18px; }
.dest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin-top: 12px; }
.rules .row { border: 0; padding: 4px 0; }

/* Adaptum Ai: one question, three attached records, three answers that point to them. */
.ai2, .md2 { display: grid; gap: 14px; }
.ai2-card, .md2-card { background: var(--a-card); border-radius: 18px; padding: 22px 24px 24px; box-shadow: 0 30px 60px -32px rgb(24 37 59 / .45); }
.ai2-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--a-line-2); }
.ai2-ctx .lbl { font-size: 12px; color: var(--a-muted); margin-right: 4px; }
.ki { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 8.5px; font-weight: 700; color: #fff; flex: none; }
.ki.dc { background: #3B5B8A; } .ki.co { background: #8A5A12; }
.ai2-ask { justify-self: end; margin: 16px 0 14px auto; width: fit-content; background: var(--a-ink); color: #F4EDE1; border-radius: 14px 14px 4px 14px; padding: 10px 14px; font-size: 15.5px; }
.ai2-ans .by { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.ai2-ans p { margin: 0; padding: 7px 10px; margin-left: -10px; border-radius: 10px; font-size: 16.5px; line-height: 1.5; transition: background .4s; }
.ai2-ans p b { font-weight: 500; }
.ai2 .c2.on { background: var(--a-primary-tint); box-shadow: inset 0 0 0 1.5px var(--a-primary); }
.ai2 p.on { background: var(--a-primary-tint); }
.ai-foot { justify-self: center; font-size: 13px; color: var(--a-muted); }

/* Models: three kinds of work routed to models; the first row swaps to show it's interchangeable. */
.md2-h { font-size: 13px; color: var(--a-muted); margin-bottom: 8px; }
.md2-row { display: grid; grid-template-columns: 1fr 20px auto auto; align-items: center; gap: 12px; padding: 14px 12px; margin: 0 -12px; border-radius: 12px; border-top: 1px solid var(--a-line-2); font-size: 16.5px; transition: background .4s; }
.md2-row:first-of-type { border-top: 0; }
.md2-row.live.flash { background: var(--a-primary-tint); }
.md2-row .arr { color: var(--a-faint); }
.mdl { display: inline-grid; justify-items: start; min-width: 150px; }
.mdl .opt { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 10px; border-radius: 10px; background: var(--a-bg); box-shadow: inset 0 0 0 1px var(--a-line); font-size: 15px; font-weight: 500; opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.mdl .opt.on { opacity: 1; transform: none; }
.mdl .opt.out { opacity: 0; transform: translateY(-6px); }
.mdl .opt i { width: 18px; height: 18px; background: var(--a-ink); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mdl.priv .opt { background: var(--a-primary-tint); box-shadow: inset 0 0 0 1px #9DC1B5; color: var(--a-primary); }
.mdl.priv .opt i { background: var(--a-primary); }
.md2-use { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--a-line); font-size: 14px; color: var(--a-ink-2); }
.md2-use .meter { height: 10px; }
.md2-use .meter b { width: 100%; transform: scaleX(.62); transform-origin: left; transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.md2-use .meter u { position: absolute; top: -4px; bottom: -4px; left: 85%; width: 2px; background: var(--a-ink); opacity: .35; }
.md2-use .meter::after { display: none; }
.md2-use .pct { font-weight: 500; color: var(--a-ink); }

/* Shared icon set (icons.js): sized by context, 1em by default. */
.ico { width: 1em; height: 1em; flex: none; display: block; }
[data-icon] { display: inline-flex; line-height: 0; vertical-align: middle; }
.ic3 > .ico, .w-h .ic .ico { width: 100%; height: 100%; }
.w-h .ic [data-icon] { width: 13px; height: 13px; }

/* ---------- Badges: one refined style for every badge on the page ----------
   Exact pill corners, a soft vertical gradient with a hairline edge, text trimmed to the
   cap height so it sits dead centre, and an active state that fills with colour and sheens. */
.bdg, .pill, .src, .tag, .chip, .c2 {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; white-space: nowrap;
  border-radius: 999px; line-height: 1; position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #FFFFFF, var(--tint, #F1F2F5)); color: var(--fg, var(--a-ink-2));
  box-shadow: inset 0 0 0 1px var(--edge, rgb(24 37 59 / .1)), 0 1px 2px rgb(24 37 59 / .06);
  transition: background .45s ease, color .45s ease, box-shadow .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.bdg .bt, .pill, .src, .tag, .chip, .c2 { text-box: trim-both cap alphabetic; }
.bdg { gap: 7px; height: 30px; padding: 0 12px 0 10px; font: 500 13px/1 "Lexend", sans-serif; }
.bdg [data-icon] { width: 14px; height: 14px; color: var(--c); transition: color .45s ease; }
.bdg .ico { width: 100%; height: 100%; }
.bdg::after, .pill::after, .src::after, .tag::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-120%); }
.bdg.on, .src.on { background: linear-gradient(180deg, var(--c-hi), var(--c)); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 6px 16px -6px var(--c); transform: translateY(-1px); }
.bdg.on [data-icon] { color: #fff; }
.bdg.on::after, .src.on::after { animation: bsheen 1.1s ease .1s; }
@keyframes bsheen { to { transform: translateX(120%); } }
/* colour kinds */
.k-blue   { --c: #3B6BB5; --c-hi: #5A8AD6; --tint: #EEF3FB; --edge: rgb(59 107 181 / .22); --fg: #2C4E86; }
.k-amber  { --c: #A8701A; --c-hi: #D19232; --tint: #FBF3E5; --edge: rgb(168 112 26 / .24); --fg: #7A5112; }
.k-violet { --c: #6D52A8; --c-hi: #8E73CC; --tint: #F2EEFA; --edge: rgb(109 82 168 / .22); --fg: #4F3A80; }
.k-green  { --c: #17604C; --c-hi: #2A8A6F; --tint: #E8F3EE; --edge: rgb(18 77 62 / .2); --fg: #124D3E; }
/* existing badge families, restyled */
.pill { gap: 6px; height: 22px; padding: 0 10px; font-size: 11px; font-weight: 500; }
.pill.g { --tint: #E2F0EA; --edge: rgb(18 77 62 / .18); --fg: #124D3E; }
.pill.a { --tint: #F8EBD3; --edge: rgb(168 112 26 / .22); --fg: #7A5112; }
.pill.s { --tint: #ECEEF2; --edge: rgb(24 37 59 / .12); --fg: var(--a-ink-2); }
.pill i { flex: none; }
.src { height: 18px; padding: 0 7px; font-size: 10px; --tint: #EEF0F4; --c: #17604C; --c-hi: #2A8A6F; }
.tag { height: 22px; padding: 0 9px; font-size: 11px; --tint: #E2F0EA; --edge: rgb(18 77 62 / .2); --fg: #124D3E; }
.chip { height: 24px; padding: 0 10px 0 6px; gap: 6px; font-size: 11px; border: 0; }
.c2 { height: 32px; padding: 0 13px 0 9px; gap: 7px; font-size: 13.5px; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .bdg::after, .src::after { animation: none !important; } }