Andy Dixon
2ecdbc39b5
- Wants: active wants by effective strength with origin, means, drives, values, goal, reinforcement, suppressions and each conflict with its resolution rule; closed wants with their resolution. - Intentions grouped by status with blocked reasons and plans, plus the wants that did not become intentions and why. An intention page shows sources, subordinate intentions, formation terms, every plan revision as a dependency graph, decisions and the correlated timeline; operators can abandon it. - Commitments with polarity, exception, matcher, weight and due time, live conflicts between commitments, a creation form and close controls. - Plans with estimate against budget; a plan page with the dependency graph, per-step expectations, observations and linked approvals, requests, executions and subordinate intentions, resources, completion and abort conditions, assumptions, alternatives, revisions and validation; operators can cancel a plan or release a blocked step. - Agency timeline labelling each event as wanted, intended, committed, planned, requested, approved, acted, observed or reconsidered. - "Why did this happen?" pages built from agency.Explain, reachable from events, executions in the approval centre, plan steps and intentions. - A research dashboard per mind (volition and agency rates, introspection accuracy, action claims, self-model accuracy, calibration by confidence band, experiments on the mind) and a global research page grouping experiments by protocol; every figure sits next to its operational definition and the disclaimer. Experiment pages show the protocol, reproducibility, build, per-variant research measures, divergence extras and counterfactual findings. - The mind tabs gain Volition; the navigation gains Research.
255 lines
23 KiB
CSS
255 lines
23 KiB
CSS
/* Noema administration interface. Design tokens first, then layout, then components.
|
|
Light theme on :root, dark via data-theme or system preference. */
|
|
:root {
|
|
--font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
--mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
--fs: 15px;
|
|
--bg: #f4f6f9; --surface: #ffffff; --surface-2: #eef1f5; --text: #1a1f26; --muted: #5d6673; --border: #dfe4ea;
|
|
--accent: #2f6fed; --accent-ink: #ffffff; --accent-soft: #e6eefc;
|
|
--ok: #178a5b; --ok-soft: #e1f5ec; --warn: #b7791f; --warn-soft: #fbf1dc; --danger: #c93b3b; --danger-soft: #fbe5e5; --info: #2b6cb0;
|
|
--shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
|
|
--radius: 10px; --sidenav: 232px;
|
|
color-scheme: light;
|
|
}
|
|
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0f1318; --surface:#161b22; --surface-2:#1d242d; --text:#e6eaf0; --muted:#8d97a5; --border:#28303b; --accent:#6c9cff; --accent-ink:#0b1220; --accent-soft:#1a2740; --ok:#3ecf8e; --ok-soft:#14301f; --warn:#e0b04c; --warn-soft:#34290f; --danger:#ff6b6b; --danger-soft:#3a1717; --info:#7ab8ff; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme: dark; } }
|
|
:root[data-theme="dark"] { --bg:#0f1318; --surface:#161b22; --surface-2:#1d242d; --text:#e6eaf0; --muted:#8d97a5; --border:#28303b; --accent:#6c9cff; --accent-ink:#0b1220; --accent-soft:#1a2740; --ok:#3ecf8e; --ok-soft:#14301f; --warn:#e0b04c; --warn-soft:#34290f; --danger:#ff6b6b; --danger-soft:#3a1717; --info:#7ab8ff; --shadow:0 1px 2px rgba(0,0,0,.4); color-scheme: dark; }
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { font-size: var(--fs); }
|
|
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
|
|
a { color: var(--accent); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
code, pre, .mono { font-family: var(--mono); font-size: .92em; }
|
|
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
|
|
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }
|
|
h3 { font-size: .95rem; margin: 0 0 .5rem; }
|
|
p { margin: 0 0 .75rem; }
|
|
.muted { color: var(--muted); }
|
|
.small { font-size: .85rem; }
|
|
.nowrap { white-space: nowrap; }
|
|
.truncate { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.ok { color: var(--ok); } .warn { color: var(--warn); } .danger { color: var(--danger); }
|
|
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--surface); padding: .5rem; z-index: 99; }
|
|
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* Shell */
|
|
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; height: 52px; padding: 0 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
|
|
.topbar-spacer { flex: 1; }
|
|
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
|
|
.brand.big { font-size: 1.4rem; margin-bottom: .5rem; }
|
|
.brand-mark { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at center, var(--surface) 0 3px, var(--accent) 4px 6px, transparent 7px), var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
|
|
.shell { display: grid; grid-template-columns: var(--sidenav) 1fr; min-height: calc(100vh - 52px - 40px); }
|
|
.sidenav { border-right: 1px solid var(--border); padding: 1rem .75rem; background: var(--surface); position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; }
|
|
.navgroup { margin-bottom: 1.1rem; }
|
|
.navhead { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0 .6rem .35rem; }
|
|
.sidenav a { display: block; padding: .42rem .6rem; border-radius: 7px; color: var(--text); font-size: .93rem; }
|
|
.sidenav a:hover { background: var(--surface-2); text-decoration: none; }
|
|
.sidenav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
|
|
.content { padding: 1.5rem 2rem 3rem; max-width: 1400px; width: 100%; }
|
|
.footer { text-align: center; padding: .75rem; border-top: 1px solid var(--border); }
|
|
.nav-toggle { display: none; }
|
|
@media (max-width: 900px) {
|
|
.shell { grid-template-columns: 1fr; }
|
|
.sidenav { display: none; position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
|
|
.sidenav.open { display: block; }
|
|
.nav-toggle { display: inline-flex; }
|
|
.content { padding: 1rem; }
|
|
}
|
|
.bare-main { min-height: calc(100vh - 40px); display: grid; place-items: center; padding: 1rem; }
|
|
|
|
/* Components */
|
|
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); }
|
|
.card.highlight { border-color: var(--accent); }
|
|
.auth-card { width: min(420px, 100%); }
|
|
.grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
|
|
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
|
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
|
|
.cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
|
|
.cols-3-1 { grid-template-columns: 3fr 1fr; }
|
|
@media (max-width: 1100px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .cols-3-1 { grid-template-columns: 1fr; } }
|
|
@media (max-width: 700px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
|
|
.pagehead { margin-bottom: 1.25rem; }
|
|
.stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
|
|
.stat-value { font-size: 1.9rem; font-weight: 650; letter-spacing: -.02em; line-height: 1.2; margin: .15rem 0; }
|
|
.stat-value.small { font-size: 1.25rem; }
|
|
.badge { display: inline-block; font-size: .74rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
|
|
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } .badge.danger { background: var(--danger-soft); color: var(--danger); } .badge.accent { background: var(--accent-soft); color: var(--accent); }
|
|
.flash { padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--border); background: var(--surface); }
|
|
.flash-ok { border-color: var(--ok); background: var(--ok-soft); } .flash-error { border-color: var(--danger); background: var(--danger-soft); } .flash-warn { border-color: var(--warn); background: var(--warn-soft); }
|
|
.error { color: var(--danger); }
|
|
.prose { max-width: 70ch; }
|
|
.steps li { margin-bottom: .4rem; }
|
|
|
|
/* Forms */
|
|
.stack { display: flex; flex-direction: column; gap: .8rem; }
|
|
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
|
|
.inline { display: inline; }
|
|
label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 500; }
|
|
input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: .5rem .65rem; }
|
|
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); }
|
|
textarea { min-height: 6rem; resize: vertical; }
|
|
.btn { font: inherit; font-size: .9rem; font-weight: 550; padding: .45rem .9rem; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
|
|
.btn:hover { background: var(--surface-2); text-decoration: none; }
|
|
.btn.small { padding: .25rem .6rem; font-size: .8rem; }
|
|
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
|
|
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
|
|
.btn-danger { color: var(--danger); border-color: var(--danger); }
|
|
.btn-ghost { border-color: transparent; background: transparent; }
|
|
.iconbtn { font: inherit; width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
|
|
|
|
/* Tables and definition lists */
|
|
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
|
|
.table th { text-align: left; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: .45rem .5rem; border-bottom: 1px solid var(--border); }
|
|
.table td { padding: .55rem .5rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
|
|
.table tr:last-child td { border-bottom: 0; }
|
|
.table.compact td, .table.compact th { padding: .35rem .45rem; }
|
|
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
|
|
.kv dt { color: var(--muted); font-size: .85rem; } .kv dd { margin: 0; }
|
|
pre.token { background: var(--surface-2); padding: .75rem; border-radius: 8px; overflow-x: auto; user-select: all; }
|
|
|
|
/* Confidence bar: inline meter used across belief/memory views */
|
|
.conf { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
|
|
.conf-bar { width: 64px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
|
|
.conf-bar i { display: block; height: 100%; background: var(--accent); }
|
|
|
|
/* Mind pages */
|
|
.mindhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
|
|
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; overflow-x: auto; }
|
|
.tabs a { padding: .5rem .8rem; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
|
|
.tabs a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
|
|
.tabs a.disabled { opacity: .45; cursor: not-allowed; }
|
|
.tabs a:hover { text-decoration: none; color: var(--text); }
|
|
pre.brief { white-space: pre-wrap; font-family: var(--font); font-size: .92rem; background: var(--surface-2); padding: .9rem; border-radius: 8px; margin: 0; line-height: 1.55; }
|
|
.fs { border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem 1rem; margin: 0; }
|
|
.fs legend { font-weight: 600; padding: 0 .3rem; }
|
|
.grid.tight { gap: .6rem; margin-bottom: .6rem; }
|
|
label.slider { display: grid; grid-template-columns: 9.5rem 1fr 2.6rem; align-items: center; gap: .6rem; font-weight: 500; margin: .25rem 0; }
|
|
label.slider output { font-variant-numeric: tabular-nums; text-align: right; color: var(--muted); font-size: .85rem; }
|
|
input[type=range] { accent-color: var(--accent); width: 100%; }
|
|
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; margin: .3rem 0; }
|
|
.grow { flex: 1; }
|
|
ul.plain { list-style: none; padding: 0; margin: 0; }
|
|
.diff-old { color: var(--danger); text-decoration: line-through; } .diff-new { color: var(--ok); }
|
|
|
|
/* Event stream */
|
|
.filterbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; margin-bottom: 1rem; }
|
|
.filterbar label { font-size: .8rem; }
|
|
.filterbar input, .filterbar select { padding: .35rem .5rem; font-size: .88rem; }
|
|
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
|
|
.table td.summary { max-width: 60ch; }
|
|
.etype { display: inline-block; font-family: var(--mono); font-size: .74rem; padding: .05rem .4rem; border-radius: 4px; background: var(--surface-2); color: var(--muted); white-space: nowrap; border-left: 3px solid var(--muted); }
|
|
.etype.cat-perception { border-left-color: #0ea5a4; } .etype.cat-cognition { border-left-color: var(--accent); } .etype.cat-memory { border-left-color: #8b5cf6; }
|
|
.etype.cat-belief { border-left-color: #d97706; } .etype.cat-prediction { border-left-color: #db2777; } .etype.cat-goal { border-left-color: #16a34a; }
|
|
.etype.cat-affect { border-left-color: #e11d48; } .etype.cat-action { border-left-color: #b45309; } .etype.cat-llm { border-left-color: #64748b; }
|
|
.etype.cat-operator { border-left-color: #0f766e; } .etype.cat-system { border-left-color: var(--border); }
|
|
.etype.cat-volition { border-left-color: #7c3aed; } .etype.cat-plan { border-left-color: #0369a1; }
|
|
tr.fresh { animation: fresh 2.5s ease-out; }
|
|
@keyframes fresh { from { background: var(--accent-soft); } to { background: transparent; } }
|
|
body.stream-offline [data-stream-status] { background: var(--danger-soft); color: var(--danger); }
|
|
pre.json { background: var(--surface-2); padding: .75rem; border-radius: 8px; overflow-x: auto; font-size: .82rem; margin: 0; max-height: 28rem; }
|
|
.chain-node { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 8px; margin: .2rem 0; }
|
|
.chain-node.current { border-color: var(--accent); background: var(--accent-soft); }
|
|
.chain-arrow { text-align: center; color: var(--muted); }
|
|
ol.corr li.current { font-weight: 600; }
|
|
.cats { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0; }
|
|
|
|
/* Workspace */
|
|
.bd { display: flex; height: 10px; width: 160px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
|
|
.bd-term { display: block; height: 100%; } .bd-term i { display: block; height: 100%; }
|
|
.f-salience { background: #0ea5a4; } .f-urgency { background: #e11d48; } .f-novelty { background: #8b5cf6; } .f-affect { background: #f472b6; } .f-goal_relevance { background: #16a34a; }
|
|
.f-consequence { background: #d97706; } .f-confidence { background: #64748b; } .f-contradiction { background: #b91c1c; } .f-operator_priority { background: #2563eb; } .f-context_relevance { background: #0891b2; }
|
|
ul.wm li { padding: .45rem 0; border-bottom: 1px solid var(--border); } ul.wm li:last-child { border-bottom: 0; }
|
|
.weights { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
|
|
.weights label { font-size: .8rem; }
|
|
|
|
/* Memory */
|
|
.memtext { font-size: 1.1rem; max-width: 80ch; }
|
|
.comp { display: inline-block; background: var(--surface-2); border-radius: 4px; padding: 0 .35rem; margin: .1rem 0; font-family: var(--mono); font-size: .72rem; }
|
|
tr.dayrow td { background: var(--surface-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
|
|
.badge.k-episodic { background: #e0f2fe; color: #0369a1; } .badge.k-semantic { background: #ede9fe; color: #6d28d9; } .badge.k-procedural { background: #dcfce7; color: #15803d; } .badge.k-autobiographical { background: #fef3c7; color: #b45309; }
|
|
:root[data-theme="dark"] .badge.k-episodic, :root:not([data-theme="light"]) .badge.k-episodic { background: #0c2a3a; color: #7dd3fc; }
|
|
:root[data-theme="dark"] .badge.k-semantic { background: #2a1f4d; color: #c4b5fd; } :root[data-theme="dark"] .badge.k-procedural { background: #12331d; color: #86efac; } :root[data-theme="dark"] .badge.k-autobiographical { background: #3a2a0a; color: #fcd34d; }
|
|
|
|
/* Beliefs */
|
|
.badge.st-hypothesis { background: var(--surface-2); color: var(--muted); } .badge.st-tentative { background: #fef3c7; color: #b45309; } .badge.st-likely { background: #dbeafe; color: #1d4ed8; }
|
|
.badge.st-accepted { background: var(--ok-soft); color: var(--ok); } .badge.st-contested { background: #fde68a; color: #92400e; } .badge.st-rejected { background: var(--danger-soft); color: var(--danger); } .badge.st-superseded { background: var(--surface-2); color: var(--muted); text-decoration: line-through; } .badge.st-unknown { background: var(--surface-2); color: var(--muted); border: 1px dashed var(--border); }
|
|
:root[data-theme="dark"] .badge.st-tentative { background: #3a2a0a; color: #fcd34d; } :root[data-theme="dark"] .badge.st-likely { background: #172554; color: #93c5fd; } :root[data-theme="dark"] .badge.st-contested { background: #3d2e05; color: #fbbf24; }
|
|
.conf.big .conf-bar.wide { width: 100%; height: 10px; margin: .3rem 0 .8rem; }
|
|
ul.ev li { padding: .4rem 0; border-bottom: 1px solid var(--border); } ul.ev li:last-child { border-bottom: 0; } ul.ev li.retracted { opacity: .55; }
|
|
|
|
/* Prompts */
|
|
textarea.mono { font-family: var(--mono); font-size: .85rem; }
|
|
pre.diff .add { color: var(--ok); } pre.diff .del { color: var(--danger); } pre.diff .ctx { color: var(--muted); }
|
|
|
|
/* Conversation */
|
|
ol.messages { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .6rem; max-height: 60vh; overflow-y: auto; }
|
|
.msg { padding: .6rem .8rem; border-radius: 10px; max-width: 85%; }
|
|
.msg-user { background: var(--accent-soft); align-self: flex-end; }
|
|
.msg-mind { background: var(--surface-2); align-self: flex-start; }
|
|
.msg-system { background: transparent; border: 1px dashed var(--border); align-self: center; }
|
|
.msg-body { white-space: pre-wrap; }
|
|
.msg-head { margin-bottom: .2rem; }
|
|
.chat-input input { min-width: 0; }
|
|
.badge.small { font-size: .65rem; }
|
|
|
|
/* Goals, predictions, state */
|
|
.badge.gs-active { background: var(--accent-soft); color: var(--accent); } .badge.gs-blocked { background: var(--warn-soft); color: var(--warn); } .badge.gs-completed { background: var(--ok-soft); color: var(--ok); } .badge.gs-abandoned, .badge.gs-paused { background: var(--surface-2); color: var(--muted); }
|
|
.badge.ps-open { background: var(--accent-soft); color: var(--accent); } .badge.ps-confirmed { background: var(--ok-soft); color: var(--ok); } .badge.ps-refuted { background: var(--danger-soft); color: var(--danger); } .badge.ps-expired, .badge.ps-withdrawn { background: var(--surface-2); color: var(--muted); }
|
|
.cal { position: relative; width: 140px; height: 10px; background: var(--surface-2); border-radius: 3px; }
|
|
.cal-bar { position: absolute; left: 0; top: 0; height: 100%; background: var(--accent-soft); border-radius: 3px; }
|
|
.cal-hit { position: absolute; top: -3px; width: 3px; height: 16px; background: var(--accent); margin-left: -1px; }
|
|
.dim { display: grid; grid-template-columns: 8rem 1fr 6rem; align-items: center; gap: .5rem; font-size: .85rem; margin: .2rem 0; }
|
|
.dim-bar { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .dim-bar i { position: absolute; top: 0; height: 100%; background: var(--accent); left: 0; }
|
|
.dim-bar.bipolar::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--muted); }
|
|
.dim-val { font-variant-numeric: tabular-nums; color: var(--muted); }
|
|
|
|
/* Notifications, narrative, reflection */
|
|
.badge.nl-info { background: var(--accent-soft); color: var(--accent); } .badge.nl-warn { background: var(--warn-soft); color: var(--warn); } .badge.nl-alert { background: var(--danger-soft); color: var(--danger); }
|
|
tr.unread td { font-weight: 500; }
|
|
.reflection { border-top: 1px solid var(--border); padding: .6rem 0; }
|
|
.narrative { font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
|
|
.warnlist li { padding: .3rem 0; border-bottom: 1px solid var(--border); }
|
|
.topbar .navcount { background: var(--danger); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .4rem; margin-left: .3rem; }
|
|
|
|
/* Graph */
|
|
.graph-card { padding: .5rem; }
|
|
canvas.graph { width: 100%; height: 560px; display: block; border-radius: 8px; background: var(--surface-2); cursor: grab; }
|
|
.legend { display: flex; flex-wrap: wrap; gap: .6rem; padding: .4rem .3rem 0; font-size: .78rem; color: var(--muted); }
|
|
.legend-item i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
|
|
.legend-item i.k-person { background: #2f6fed; } .legend-item i.k-system { background: #0ea5a4; } .legend-item i.k-project { background: #16a34a; } .legend-item i.k-document { background: #d97706; } .legend-item i.k-concept { background: #8b5cf6; } .legend-item i.k-repository { background: #64748b; } .legend-item i.k-organisation { background: #db2777; } .legend-item i.k-place { background: #0891b2; } .legend-item i.k-other { background: #9ca3af; }
|
|
|
|
/* Capabilities */
|
|
.badge.rk-low { background: var(--ok-soft); color: var(--ok); } .badge.rk-medium { background: var(--warn-soft); color: var(--warn); } .badge.rk-high { background: var(--danger-soft); color: var(--danger); } .badge.rk-critical { background: var(--danger); color: #fff; }
|
|
.badge.ef-allow { background: var(--ok-soft); color: var(--ok); } .badge.ef-ask { background: var(--warn-soft); color: var(--warn); } .badge.ef-deny { background: var(--danger-soft); color: var(--danger); }
|
|
.badge.ap-executed, .badge.ap-approved { background: var(--ok-soft); color: var(--ok); } .badge.ap-denied, .badge.ap-failed { background: var(--danger-soft); color: var(--danger); } .badge.ap-expired { background: var(--surface-2); color: var(--muted); }
|
|
.tablewrap { overflow-x: auto; }
|
|
.approval { border: 1px solid var(--border); border-radius: 8px; padding: .8rem 1rem; margin-bottom: .8rem; }
|
|
.approval-head { margin-bottom: .5rem; }
|
|
|
|
/* Integrations */
|
|
.badge.is-ok { background: var(--ok-soft); color: var(--ok); } .badge.is-stale { background: var(--warn-soft); color: var(--warn); } .badge.is-error { background: var(--danger-soft); color: var(--danger); } .badge.is-new, .badge.is-disabled { background: var(--surface-2); color: var(--muted); }
|
|
|
|
/* Study: replay & experiments */
|
|
.replay-step { padding: .6rem 0; border-top: 1px solid var(--border); } .replay-step:first-child { border-top: 0; } .replay-step ul { margin: .2rem 0 0 1rem; padding: 0; } .strong { font-weight: 600; }
|
|
.break { word-break: break-all; }
|
|
|
|
/* Causal timeline */
|
|
.tl-cycle { border-left: 2px solid var(--border); margin: .6rem 0 .6rem .4rem; padding: .2rem 0 .2rem .9rem; } .tl-node { padding: .35rem 0 .35rem .6rem; border-left: 2px solid transparent; } .tl-node.current { border-left-color: var(--accent); background: var(--surface-2); border-radius: 4px; } .tl-when { font-family: var(--mono); }
|
|
|
|
/* Volition, plans and research */
|
|
.tabs.subtabs { margin-top: -.5rem; font-size: .85rem; }
|
|
.dag { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: .5rem; align-items: flex-start; }
|
|
.dag-level { display: flex; flex-direction: column; gap: .5rem; min-width: 12rem; }
|
|
.dag-level h4 { margin: 0; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
|
|
.dag-step { border: 1px solid var(--border); border-left-width: 4px; border-radius: 6px; padding: .45rem .6rem; background: var(--surface); font-size: .82rem; }
|
|
.dag-step .key { font-family: var(--mono); font-weight: 600; }
|
|
.dag-step.st-completed { border-left-color: #16a34a; } .dag-step.st-failed, .dag-step.st-cancelled { border-left-color: #dc2626; }
|
|
.dag-step.st-executing, .dag-step.st-ready { border-left-color: var(--accent); } .dag-step.st-awaiting_approval, .dag-step.st-awaiting_grant, .dag-step.st-blocked { border-left-color: #d97706; }
|
|
.dag-step.st-waiting { border-left-color: #0ea5a4; } .dag-step.st-skipped { border-left-color: var(--muted); } .dag-step.st-pending { border-left-color: var(--border); }
|
|
.stage { display: inline-block; min-width: 6.5rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
|
|
.why-section { border-left: 3px solid var(--border); padding-left: .8rem; margin: .6rem 0; }
|
|
.why-section h3 { margin: 0 0 .2rem; font-size: .85rem; color: var(--muted); }
|
|
.disclaimer { border: 1px solid var(--border); background: var(--surface-2); padding: .6rem .8rem; border-radius: 6px; font-size: .85rem; }
|
|
.bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: .25rem .6rem; align-items: center; font-size: .82rem; }
|
|
.bars .bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; } .bars .bar i { display: block; height: 100%; background: var(--accent); }
|