/* Knos design system: one type scale, one restrained palette, AA contrast in both themes, LTR and RTL. */
/* The tokens (logo, type, colour, spacing, the bar) are /static/brand/tokens.css, the front door's own file, loaded first. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-1)/1.55 var(--text); }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-underline-offset: 2px; }
h1 { font-size: clamp(26px, 5.4vw, 38px); line-height: 1.12; letter-spacing: -.015em; margin: 20px 0 10px; }
h2 { font-size: var(--fs-4); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 10px; }
h3 { font-size: var(--fs-2); margin: 0 0 6px; }
p { margin: 8px 0; }
.small { font-size: var(--fs-0); } .muted { color: var(--muted); }
.mono { font-family: var(--code); font-size: .92em; }
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; inset-inline-start: 8px; top: 8px; width: auto; height: auto; clip-path: none; background: var(--surface); padding: 8px 12px; z-index: 99; border-radius: var(--r-s); }

.badge { min-width: 5.6em; text-align: center; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.live { color: var(--ok); border-color: currentColor; } .badge.off { color: var(--danger); border-color: currentColor; }
select.lang { font: inherit; font-size: var(--fs-0); padding: 6px 8px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 110px; }
/* layout + cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; margin: 14px 0; box-shadow: var(--shadow); overflow-wrap: anywhere; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.grid > div { background: var(--soft); border-radius: var(--r-s); padding: 12px 14px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spread { justify-content: space-between; }

/* forms + buttons */
label { display: block; font-size: var(--fs-0); font-weight: 600; margin: 12px 0 5px; color: var(--ink); }
input, textarea, select.field { width: 100%; font: inherit; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); }
input::placeholder, textarea::placeholder { color: var(--muted); }
:is(input, textarea, select, button, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, a.button { font: inherit; font-weight: 600; min-height: 44px; padding: 10px 18px; border-radius: var(--r-s); border: 1px solid var(--accent);
  background: var(--accent); color: var(--accent-ink); cursor: pointer; margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
button.ghost, a.button.ghost { background: transparent; color: var(--accent); }
button.quiet { background: transparent; border-color: var(--line); color: var(--ink); min-height: 36px; margin: 0; padding: 6px 12px; }
button:disabled { opacity: .55; cursor: default; }
.chip { margin: 2px 6px 2px 0; padding: 5px 12px; min-height: 34px; font-size: 13px; border-radius: 99px; background: var(--soft); color: var(--ink); border: 1px solid var(--line); }

/* states */
.note { border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); background: var(--surface); border-radius: var(--r-s); padding: 10px 14px; margin: 12px 0; }
.err { border-inline-start-color: var(--danger); color: var(--danger); }
.testmoney { font-size: 12px; font-weight: 600; color: var(--warnc); border: 1px solid currentColor; border-radius: 6px; padding: 2px 8px; display: inline-block; }
.empty { text-align: center; color: var(--muted); padding: 26px 10px; }
.spin { width: 15px; height: 15px; border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: turn .8s linear infinite; flex: none; }
@keyframes turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } .step { animation: none !important; } }

/* timeline */
.steps { list-style: none; padding: 0; margin: 0; }
.step { border-inline-start: 3px solid var(--line); padding: 8px 14px; margin: 0 0 6px; animation: rise .25s ease; }
.step.qloo { border-color: var(--accent); } .step.decision { border-color: var(--ok); } .step.memory { border-color: var(--warnc); }
.step b { overflow-wrap: anywhere; }
.step p { margin: 3px 0; } .step pre { white-space: pre-wrap; font-size: 12px; margin: 4px 0; }
.effect { color: var(--ok); font-size: var(--fs-0); }
.tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin-inline-end: 6px; color: var(--muted); }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* products */
.plist { display: grid; gap: 10px; padding: 0; list-style: none; margin: 10px 0; }
.plist a.p { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.plist a.p:hover { border-color: var(--accent); }
.plist .v { font-size: 12px; font-weight: 700; color: var(--ok); }
.decision { border-radius: var(--r-s); padding: 14px 16px; margin: 12px 0; background: var(--soft); border-inline-start: 5px solid var(--warnc); }
.decision.open { border-color: var(--ok); } .decision.refuse { border-color: var(--danger); }
.list { padding-inline-start: 18px; } .list li { margin: 8px 0; }
progress { width: 100%; height: 10px; accent-color: var(--accent); }
details { margin: 8px 0; } summary { cursor: pointer; font-weight: 600; font-size: var(--fs-0); color: var(--muted); }
footer { padding: 26px 16px 42px; }
code.url { background: var(--soft); padding: 3px 8px; border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; overflow-wrap: anywhere; display: inline-block; }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } .card { padding: 15px; } }
#fundList, #makeList { list-style: none; padding: 0; }
/* the sign-in sheet: reachable anywhere on the page, phone first */
#signin:not([hidden]) { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; margin: 0; max-height: 86vh; overflow: auto;
  border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -8px 40px rgba(0, 0, 0, .35); }
@media (min-width: 700px) { #signin:not([hidden]) { inset-inline: auto; inset-inline-end: 16px; inset-block-end: 16px; width: 380px; border-radius: var(--r); } }
.note.ok { border-inline-start-color: var(--ok); }

/* the account button never pushes the header wider than the phone */
#whoBtn { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.bar { min-width: 0; } .bar > * { min-width: 0; } select.lang { max-width: 96px; }
@media (max-width: 400px) { #whoBtn { max-width: 6.5rem; } .badge { display: none; } }
/* the bar stays one line whatever the fonts: a part that grows (the mode badge's text once the status is read) would
   otherwise wrap Sign in to a second line and push the whole page down (a layout shift of 0.35 in Lighthouse) */
.bar { flex-wrap: nowrap; } .brand { min-width: 0; }
#whoBtn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
@media (max-width: 460px) { .badge { display: none; } }
[dir="rtl"] #whoBtn { direction: rtl; }

/* projects + teams (valley.js) */
fieldset.opts { border: 0; padding: 0; margin: 10px 0; } fieldset.opts legend { font-weight: 600; margin-bottom: 6px; }
label.opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; min-height: 44px; }
label.opt input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--accent); }
label.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tag { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--soft); border: 1px solid var(--line); }
.chip.st-released { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chip.st-reopened { color: var(--warnc); border-color: currentColor; background: transparent; }
.chip.st-funded, .chip.st-claimed { color: var(--ok); border-color: currentColor; background: transparent; }
.ms h3 { margin: 0; } .ms details { margin: 10px 0; } .ms summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.pcard a { text-decoration: none; }

/* the view named in the URL is laid out before app.js runs (no layout shift on a deep link) */
html[data-view]:not([data-view=research]) #v-research { display: none; }
:is(html[data-view=research], html[data-view=buy], html[data-view=fund], html[data-view=contribute], html[data-view=make], html[data-view=projects], html[data-view=teams], html[data-view=agents]) #v-home { display: none; }
html[data-view=buy] #v-buy[hidden],
html[data-view=fund] #v-fund[hidden],
html[data-view=contribute] #v-contribute[hidden],
html[data-view=make] #v-make[hidden],
html[data-view=projects] #v-projects[hidden],
html[data-view=teams] #v-teams[hidden],
html[data-view=agents] #v-agents[hidden] { display: block !important; }
/* Contribute: the milestones under the rounds are shown once the rounds are drawn, so nothing on screen is pushed down */
#v-contribute:not([data-tasks]) > h2, #v-contribute:not([data-tasks]) > #needList { visibility: hidden; }
#tplPick { min-height: 330px; } #regPick { min-height: 150px; }
label.opt { font-weight: 400; font-size: var(--fs-1); margin: 6px 0; }

/* home: the research products open for backing now; every card keeps its height while it loads (no layout shift) */
.lead { font-size: var(--fs-2); color: var(--muted); margin: 0 0 6px; }
.hp { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hp-card { margin: 0; min-height: 196px; display: flex; flex-direction: column; gap: 4px; }
.hp-card .hp-t { font-size: var(--fs-3); margin: 0; }
.hp-card .acts { margin-top: auto; } .hp-card .acts .button { margin-top: 6px; padding: 8px 14px; }
.hp-card.sk { background: linear-gradient(90deg, var(--soft), var(--surface), var(--soft)); }
.meter { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; margin: 6px 0 2px; }
.meter > span { display: block; height: 100%; background: var(--accent); }
.card.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
#fundList, #lendList, #needList { list-style: none; padding: 0; }

/* static/ux.js: display modes, the display sheet, the "what is happening" pill */
.left-hand .ux-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; padding: 16px; display: grid; gap: 8px; background: var(--paper, #fff); border-top: 1px solid var(--line, #ccc); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); }
.ux-sheet[hidden], .ux-now[hidden], .ux-toast[hidden] { display: none; }
.ux-sheet button[aria-pressed="true"] { outline: 2px solid currentColor; }
.ux-now { position: fixed; left: 50%; translate: -50% 0; top: 8px; z-index: 32; margin: 0; padding: 4px 12px; border-radius: 12px; font-size: .85rem; background: var(--ink, #222); color: var(--paper, #fff); }
.ux-toast { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 31; margin: 0; padding: 10px 14px; border-radius: 10px; background: var(--ink, #222); color: var(--paper, #fff); }
.mic { min-width: 44px; min-height: 44px; }
.simple details.k-more, .simple #poolBox, .simple .advanced { display: none !important; }      /* never a money action: only explanations and the advanced pool */
.simple { font-size: 112%; }
.contrast { --ink: #000; --paper: #fff; --muted: #000; filter: contrast(1.15); }
.contrast a { text-decoration: underline; }
.dyslexia body { font-family: Verdana, "Atkinson Hyperlegible", Tahoma, sans-serif; letter-spacing: .03em; word-spacing: .12em; line-height: 1.7; }
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
/* static/ux_more.js: the long-press menu, live cursors, the milestone canvas, compact density, the mobile bottom bar */
.ux-menu { position: fixed; z-index: 33; display: grid; background: var(--paper, #fff); border: 1px solid var(--line, #ccc); border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.ux-menu button { min-height: 44px; padding: 0 16px; text-align: left; background: none; border: 0; }
.ux-cursor { position: fixed; z-index: 29; pointer-events: none; font-size: .75rem; padding: 2px 6px; border-radius: 8px; background: #3e63dd; color: #fff; translate: 6px 6px; }
.ux-canvas { position: relative; min-height: 900px; }
.ux-canvas > li { position: absolute; width: 32%; cursor: grab; }
.compact { --gap: 6px; } .compact .card { padding: 10px; } .compact p { margin: 4px 0; }
@media (max-width: 720px) {
    .card, .pcard { max-height: 80vh; overflow: auto; }
}
button:active { transform: scale(.97); }
.night-voice .mic { min-width: 64px; min-height: 64px; font-size: 1.5rem; }
.ux-help { position: fixed; right: 0; top: 0; bottom: 0; width: min(320px, 90vw); padding: 16px; background: var(--surface); border-inline-start: 1px solid var(--line); overflow: auto; z-index: 40; }
.ux-help-btn { min-width: 44px; min-height: 44px; border-radius: 50%; }
.left-hand @media (max-width: 720px) { .step { animation-duration: calc(.25s * var(--speed, 1)); } .spin { animation-duration: calc(.8s * var(--speed, 1)); }
.ux-done { pointer-events: none; position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; padding: 8px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); z-index: 45; animation: rise calc(.25s * var(--speed, 1)) ease; }
.reduce-motion .ux-done { animation: none; }
/* the Qloo demand families (static/demand_opts.js): one row per family, Advanced folded */
fieldset.fam { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; min-width: 0; }
fieldset.fam legend { font-size: var(--fs-0); font-weight: 600; padding: 0 4px; }
.famrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.famrow .famq { flex: 0 0 7.5rem; font-size: var(--fs-0); font-weight: 600; }
.famrow select, .famrow input { flex: 1 1 8rem; min-width: 0; margin: 0; }
.famrow input.yr { flex: 0 1 6rem; }
.famrow label.chk { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-0); margin: 0; flex: 0 0 auto; white-space: nowrap; }
.famrow label.chk input { flex: 0 0 auto; width: auto; min-height: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
details.famadv summary { cursor: pointer; font-size: var(--fs-0); min-height: 44px; display: flex; align-items: center; }
.famgrid { display: grid; gap: 10px; }
.famset { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.famset > b { grid-column: 1 / -1; font-size: var(--fs-0); }
.famset label { font-size: var(--fs-0); margin: 0; }
.famans { margin-top: 10px; }
@media (max-width: 420px) { .famrow .famq { flex-basis: 100%; } }