:root {
  --bg: #F5F3EC; --panel: #FBFAF6; --ink: #16181D; --ink2: #2A2925; --ink3: #3D3B36; --muted: #5A5750;
  --line: #DDD9CE; --line2: #C9C4B7; --soft: #EEEBE2; --accent: #1E3A5F; --accent2: #7C95B8; --accent3: #C6D0DD;
  --warn: #A3471A; --sel: #E8ECF2;
  --serif: 'Newsreader', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 14px; }
a { color: var(--accent); } a:hover { color: var(--ink); }
button { font: inherit; }
.page { max-width: 1440px; margin: 0 auto; padding: 22px 20px 48px; }
.lbl { font-family: var(--mono); font-weight: 500; font-size: 10.5px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: var(--mono); } .serif { font-family: var(--serif); }
.muted { color: var(--muted); } .small { font-size: 12px; line-height: 1.5; }
.up { color: var(--accent); } .down { color: var(--warn); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; }
h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.01em; }
h2 { font-size: 25px; } h3 { font-size: 19px; }

.masthead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.brand { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); }
.wordmark { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: .22em; line-height: 1; }
.nav { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13px; }
.nav a { text-decoration: none; padding: 4px 0; border-bottom: 1px solid transparent; }
.nav a.on { color: var(--ink); border-bottom-color: var(--ink); }
.statusbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); display: inline-block; margin-right: 7px; vertical-align: 1px; }
.dot.live { background: var(--accent); }
.tape-wrap { overflow: hidden; border-bottom: 1px solid var(--line2); background: #EFECE3; padding: 7px 0; min-height: 30px; }
.tape { display: flex; gap: 28px; width: max-content; font-size: 11px; animation: tape 80s linear infinite; }
.tape b { font-weight: 500; color: var(--ink); }
@keyframes tape { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tape { animation: none; } }
main { outline: none; }
.foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 36px; }

.section { padding: 30px 0; border-bottom: 1px solid var(--line2); }
.section:last-child { border-bottom: 0; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.sec-head > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.row { display: flex; flex-wrap: wrap; gap: 32px; }
.col { flex: 1 1 380px; min-width: 0; }
.col-2 { flex: 2 1 520px; min-width: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.panel-body { padding: 12px; }
.lede { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink3); max-width: 760px; margin: 0; }
.empty { padding: 18px 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.note { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin-top: 8px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-bottom: 1px solid var(--line2); }
.kpi { padding: 16px 16px 16px 0; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--line); margin-right: 16px; }
.kpi:last-child { border-right: 0; }
.kpi .v { font-family: var(--mono); font-size: 25px; }
.kpi .n { font-size: 11.5px; color: var(--ink3); }

.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 820px; }
.tbl th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--ink); font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.tbl tr:hover td { background: var(--soft); }
.tbl .r { text-align: right; } .tbl .nowrap { white-space: nowrap; }
.asset-link { font-family: var(--serif); font-size: 15px; color: var(--ink); text-decoration: none; }
.asset-link:hover { text-decoration: underline; }
.chip { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border: 1px solid currentColor; white-space: nowrap; display: inline-block; }
.chip.Seeding, .chip.Coiling, .chip.Crossing { color: var(--accent); }
.chip.Fading { color: var(--warn); } .chip.Peak, .chip.Steady { color: var(--ink); }
.sq { width: 9px; height: 9px; display: inline-block; border: 1px solid var(--accent); margin-right: 4px; }
.sq.on { background: var(--accent); }
.persona { font-family: var(--mono); font-size: 10px; padding: 2px 6px; background: var(--sel); color: var(--accent); margin: 0 4px 4px 0; display: inline-block; }

.tabs { display: flex; flex-wrap: wrap; }
.tab { appearance: none; border: 1px solid var(--line2); background: transparent; color: var(--ink3); font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 0 12px; min-height: 32px; cursor: pointer; margin-left: -1px; }
.tab:first-child { margin-left: 0; }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn { appearance: none; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 0 14px; min-height: 38px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn:hover { color: var(--bg); opacity: .9; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--soft); color: var(--ink); }
.icon-btn { appearance: none; border: 0; background: transparent; cursor: pointer; color: var(--muted); min-width: 34px; min-height: 34px; font-size: 20px; line-height: 1; }
.icon-btn:hover { color: var(--ink); background: var(--soft); }
.share-btn { appearance: none; border: 1px solid var(--line2); background: transparent; cursor: pointer; color: var(--muted); width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; }
.share-btn:hover { color: var(--ink); border-color: var(--ink); }
input[type=text], input[type=password], input[type=email], input[type=number], textarea, select { width: 100%; font: 13px var(--sans); color: var(--ink); background: var(--panel); border: 1px solid var(--line2); padding: 8px 10px; }
textarea { resize: vertical; line-height: 1.5; }

/* chart text */
svg text { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
svg .ink { fill: var(--ink); }

/* terminal */
.cmd { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; background: var(--ink); color: var(--bg); padding: 8px 12px; font-family: var(--mono); font-size: 12px; margin: 12px 0; }
.cmd .k { color: #B9B4A8; } .cmd .hl { color: #9DB7DA; }
.term-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.wl-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; border-bottom: 1px solid #E4E0D5; }
.wl-row.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.wl { appearance: none; width: 100%; display: grid; grid-template-columns: 90px minmax(0, 1fr) 62px; gap: 8px; align-items: center; text-align: left; background: transparent; border: 0; padding: 0 10px; min-height: 42px; cursor: pointer; font-family: var(--mono); font-size: 11.5px; color: var(--ink); }
.wl:hover { background: var(--soft); }
.wl-share { appearance: none; border: 0; border-left: 1px solid #E4E0D5; background: transparent; color: var(--muted); cursor: pointer; }
.wl-share:hover { color: var(--ink); background: var(--soft); }
.tape-row { display: grid; grid-template-columns: 52px 84px 46px minmax(0, 1fr); gap: 6px; padding: 5px 12px; font-family: var(--mono); font-size: 10.5px; border-bottom: 1px solid var(--soft); }
.stats-line { display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 10px 12px 0; font-family: var(--mono); font-size: 11.5px; }
.stats-line .k { color: var(--muted); }

/* trend report */
.quote { background: var(--ink); color: var(--bg); padding: 12px 16px; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: baseline; font-family: var(--mono); font-size: 11.5px; }
.quote .k { color: #B9B4A8; } .quote .hl { color: #9DB7DA; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); align-content: start; }
.fact { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.fact .v { font-family: var(--mono); font-size: 19px; }
.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ex { background: var(--panel); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ex p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--ink2); }
.notes-form { display: grid; gap: 10px; }
.notes-form label { display: flex; flex-direction: column; gap: 4px; }

/* weekly */
.week-wrap { max-width: 800px; margin: 0 auto; }
.acc { background: var(--panel); border: 1px solid var(--line); margin-bottom: 12px; }
.acc-btn { appearance: none; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 16px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; color: var(--ink); }
.acc-btn:hover { background: var(--soft); }
.acc-body { padding: 4px 16px 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.tile { background: var(--bg); border: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tile .v { font-family: var(--mono); font-size: 16px; }
.qr { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.qr p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink2); }
.dark-box { background: var(--ink); color: var(--bg); padding: 14px; }
.meter span { width: 18px; height: 10px; display: inline-block; background: #E7E3D8; margin-right: 5px; }
.meter span.on { background: var(--warn); }

/* overlays */
.overlay { position: fixed; inset: 0; background: rgba(22, 24, 29, .55); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.overlay[hidden] { display: none; }
.login-card { background: var(--panel); border: 1px solid var(--ink); padding: 26px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; margin-top: 10vh; }
.modal { background: var(--panel); border: 1px solid var(--ink); width: 100%; max-width: 900px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
#modal-body { padding: 18px; }
.share-layout { display: flex; flex-wrap: wrap; gap: 22px; }
.share-layout canvas { width: 324px; height: auto; aspect-ratio: 1080 / 1350; border: 1px solid var(--line); flex: none; max-width: 100%; }
.share-layout.slide canvas { width: 640px; aspect-ratio: 1920 / 1080; }
.share-layout.vertical canvas { width: 270px; aspect-ratio: 1080 / 1920; }
.modal:has(.share-layout.slide) { max-width: min(1180px, 96vw); }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--ink); color: var(--bg); padding: 10px 14px; font-size: 12.5px; max-width: 340px; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.toast.warn { background: var(--warn); }
.skeleton { color: var(--muted); padding: 30px 0; font-family: var(--mono); font-size: 12px; }

@media (max-width: 640px) {
  .kpi { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:last-child { border-bottom: 0; }
  h1 { font-size: 30px; }
  .page { padding: 16px 12px 40px; }
  .share-layout canvas { width: 100%; height: auto; }
}

.wl-scroll { max-height: 640px; overflow-y: auto; }
#ttape { max-height: 600px; overflow-y: auto; }

/* v0.7 accounts */
#login { background: var(--bg); }
.login-card .wordmark { margin-bottom: 4px; }
.login-card h2 { margin: 0; font-size: 22px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; }
.login-card input { width: 100%; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linkbtn:hover { color: var(--ink); }
.auth-links { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.auth-err { color: var(--warn); font-size: 13px; min-height: 1em; margin: 0; }
.auth-ok { color: var(--accent); font-size: 13px; margin: 0; }
.form-grid { display: grid; gap: 12px; max-width: 460px; }
.form-grid label { display: flex; flex-direction: column; gap: 5px; }
.check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.invite-out { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px solid var(--accent); background: var(--sel); margin-top: 12px; }
.invite-out code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; flex: 1 1 260px; }
.role-admin { color: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- conversations (v0.8) */
.cv-cat { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; }
.cv-cat.cu { color: var(--accent); border-color: var(--accent3); background: #EEF2F7; }
.cv-cat.ev { color: var(--warn); border-color: #E3C2B1; background: #F8EEE8; }
.cv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cv-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--panel); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cv-card:hover, .cv-card:focus-visible { border-color: var(--ink); color: var(--ink); }
.cv-card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cv-card-title { font-size: 21px; line-height: 1.2; }
.cv-card-hook { font-style: italic; color: var(--ink3); font-size: 15px; }
.cv-terms { display: flex; flex-wrap: wrap; gap: 4px; }
.cv-term { font-size: 11.5px; padding: 2px 7px; background: var(--soft); color: var(--ink3); }
.cv-card-foot { display: flex; gap: 12px; align-items: center; margin-top: auto; padding-top: 6px; border-top: 1px solid var(--line); }
.cv-card-foot svg { margin-left: auto; }
.cv-week { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cv-week:hover { color: var(--ink); background: var(--panel); }

.cv-grid { display: grid; grid-template-columns: 270px minmax(0, 1fr) 360px; border: 1px solid var(--line2); background: var(--panel); margin-top: 18px; }
.cv-pad { padding: 16px; }
.cv-list { border-right: 1px solid var(--line2); min-width: 0; }
.cv-side { border-left: 1px solid var(--line2); min-width: 0; max-height: 1100px; overflow-y: auto; }
.cv-main { min-width: 0; display: flex; flex-direction: column; }
.cv-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cv-item:hover { background: var(--soft); color: var(--ink); }
.cv-item.on { background: var(--sel); box-shadow: inset 3px 0 0 var(--accent); }
.cv-item-title { display: block; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.cv-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 1px solid var(--line); }
.cv-title { font-size: 32px; margin-top: 6px; overflow-wrap: anywhere; }
.cv-hook { font-style: italic; font-size: 18px; color: var(--ink3); margin-top: 4px; }
.cv-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.cv-summary { margin-top: 10px; max-width: 760px; }
.cv-tools { display: flex; gap: 6px; flex-shrink: 0; }
.cv-tools .btn { min-height: 32px; padding: 0 10px; }
.cv-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); color: var(--ink3); }
.cv-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.dot.c { background: var(--accent); } .dot.g { background: var(--accent2); } .dot.t { background: var(--panel); border: 1.5px solid var(--accent); } .dot.n { background: var(--panel); border: 2px solid var(--warn); }
.cv-map { background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, var(--panel) 70%); }
#cv-svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; user-select: none; }
#cv-svg.grab { cursor: grabbing; }
.cv-spoke { stroke: var(--accent2); opacity: .55; } .cv-branch { stroke: var(--line2); }
.cv-tie { fill: none; stroke: var(--accent); opacity: .14; stroke-dasharray: 3 3; }
.cv-n { cursor: pointer; outline: none; }
.cv-n circle { transition: stroke-width .15s; }
.cv-n.center circle { fill: var(--accent); } .cv-n.center .halo { fill: none; stroke: var(--accent3); stroke-width: 1.5; }
.cv-n.center text { fill: #fff; font-family: var(--serif); font-size: 15px; }
.cv-n.group circle { fill: var(--accent2); stroke: #fff; stroke-width: 2; }
.cv-n.term circle { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
.cv-n.term.news circle { stroke: var(--warn); stroke-width: 2.5; }
.cv-n text { font-family: var(--mono); font-size: 11.5px; fill: var(--ink3); paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.cv-n.center text { stroke: none; }
.cv-n text.glabel { font-family: var(--serif); font-size: 14px; fill: var(--ink); }
.cv-n:hover circle, .cv-n:focus-visible circle { stroke: var(--ink); stroke-width: 3; }
.cv-n.sel circle { stroke: var(--ink); stroke-width: 3.5; }
.cv-n.rel circle { fill: var(--sel); stroke: var(--ink); }
.cv-threads { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
.cv-thread { text-align: left; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); cursor: pointer; }
.cv-thread b { font-family: var(--serif); font-weight: 400; font-size: 16px; }
.cv-thread:hover, .cv-thread.on { border-color: var(--ink); background: var(--sel); }
.cv-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cv-stats .mono { font-size: 17px; margin-top: 2px; }
.cv-post { padding: 12px 0; border-top: 1px solid var(--line); }
.cv-post:first-child { border-top: 0; }
.cv-post p { font-family: var(--serif); font-size: 15.5px; line-height: 1.45; margin: 6px 0; overflow-wrap: anywhere; }
@media (max-width: 1180px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  .cv-list { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line2); }
  #cv-items { display: flex; overflow-x: auto; }
  .cv-item { min-width: 250px; border-top: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 800px) {
  .cv-grid { grid-template-columns: minmax(0, 1fr); }
  .cv-side { border-left: 0; border-top: 1px solid var(--line2); max-height: none; }
  .cv-head { flex-direction: column; }
  .cv-title { font-size: 26px; }
}

.read-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; max-width: 1100px; }
@media (max-width: 800px) { .read-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- logo */
.masthead .logo { display: block; height: 22px; width: auto; align-self: flex-start; object-fit: contain; }
.logo-stacked { display: block; height: 56px; width: auto; margin: 0 auto 6px; align-self: center; object-fit: contain; }
@media (max-width: 640px) { .masthead .logo { height: 18px; } }

.cv-threads-list { display: flex; flex-direction: column; gap: 5px; }
.cv-thread-line { font-size: 13px; line-height: 1.4; color: var(--ink3); }
.cv-thread-line b { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--ink); }

.editor-band { padding-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.editor-band[hidden] { display: none; }
.editor-headline { font-size: 40px; max-width: 1000px; }
.editor-note { max-width: 860px; font-size: 19px; }
.cv-card-summary { font-size: 13.5px; line-height: 1.45; color: var(--ink3); }
@media (max-width: 640px) { .editor-headline { font-size: 28px; } }