/* Shared by tokenomics.html and board.html: the org chart (money + governance diagram), its slider,
   and the CEO / DAO / hard-coded cards. Page-only styles stay inline on each page. */
:root { --tk-fare: #0d9488; --tk-fare-soft: #e6f7f4; --tk-rail: #a855f7; --tk-rail-soft: #f5edff; --tk-gov: #c2620a; --tk-gov-soft: #fff4e6; }

.tk-tag-rail { background: var(--tk-rail-soft); color: #7e22ce; }
.tk-tag-fare { background: var(--tk-fare-soft); color: #0f766e; }
.tk-tag-nft { background: var(--accent-soft); color: #4a3bd6; }

/* Org chart */
.tk-figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 26px 18px; box-shadow: var(--shadow); }
.tk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tk-flow-svg { min-width: 960px; width: 100%; height: auto; }
.tk-flow-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.tk-flow-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tk-flow-legend i { display: inline-block; width: 26px; border-top: 2.5px solid currentColor; }
.tk-lg-usd { color: var(--ink); } .tk-lg-nft { color: var(--accent); } .tk-lg-founder { color: var(--muted-2); }
.tk-lg-fare { color: var(--tk-fare); } .tk-lg-rail { color: var(--tk-rail); } .tk-lg-rail i { border-top-style: dashed; }
.tk-lg-gov { color: var(--tk-gov); } .tk-lg-vote { color: var(--tk-gov); } .tk-lg-vote i { border-top-style: dashed; }
.tk-flow-ctl { max-width: 460px; margin: 0 0 22px; }
.tk-flow-legend b { font-weight: 500; color: var(--ink-2); }
.tk-lane { fill: #fafaf8; stroke: var(--line-2); stroke-width: 1; }
.tk-lane-t { font: 600 10.5px var(--font); letter-spacing: .14em; text-transform: uppercase; fill: var(--muted-2); }
.tk-pill rect { fill: #fff; stroke-width: 1.3; }
.tk-pill text { font: 600 11.5px var(--font); font-variant-numeric: tabular-nums; }
.tk-pill.ink rect { stroke: var(--ink); } .tk-pill.ink text { fill: var(--ink); }
.tk-pill.nft rect { stroke: var(--accent); } .tk-pill.nft text { fill: #4a3bd6; }
.tk-pill.fare rect { stroke: var(--tk-fare); } .tk-pill.fare text { fill: #0f766e; }
.tk-pill.rail rect { stroke: var(--tk-rail); } .tk-pill.rail text { fill: #7e22ce; }
.tk-pill.grey rect { stroke: var(--muted-2); } .tk-pill.grey text { fill: var(--muted); }
.tk-pill.gov rect, .tk-pill.vote rect { stroke: var(--tk-gov); } .tk-pill.gov text, .tk-pill.vote text { fill: #9a4a05; }
.tk-pill.badge rect { fill: var(--tk-gov-soft); stroke: var(--tk-gov); stroke-width: 1; }
.tk-n rect { filter: drop-shadow(0 6px 14px rgba(17, 17, 17, .06)); }
.tk-figure figcaption { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.tk-n rect { stroke-width: 1.6; }
.tk-n.money rect { fill: #fff; stroke: var(--ink); }
.tk-n.nft rect { fill: var(--accent-soft); stroke: var(--accent); }
.tk-n.fare rect { fill: var(--tk-fare-soft); stroke: var(--tk-fare); }
.tk-n.founder rect { fill: var(--bg-alt); stroke: var(--muted-2); }
.tk-n.rail rect { fill: var(--tk-rail-soft); stroke: var(--tk-rail); }
.tk-n.special rect { fill: #e9e5ff; stroke: #4a3bd6; stroke-width: 2.8; }
.tk-n.gov rect { fill: var(--tk-gov-soft); stroke: var(--tk-gov); stroke-width: 2.4; }
.tk-n .t { font: 600 14px var(--font); fill: var(--ink); }
.tk-n .s { font: 400 12px var(--font); fill: var(--muted); }
.tk-n.gov .s.on { fill: #9a4a05; font-weight: 600; }   /* the DAO bar: which voting rule applies right now */
.tk-n .v { font: 600 13px var(--font); font-variant-numeric: tabular-nums; fill: var(--ink); }
.tk-n.fare .v { fill: #0f766e; } .tk-n.nft .v { fill: #4a3bd6; } .tk-n.founder .v { fill: var(--ink-2); }
.tk-dot { fill: var(--ink); }
.tk-final rect { fill: #fff; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 5 4; filter: drop-shadow(0 6px 14px rgba(17, 17, 17, .06)); }
.tk-final .h { font: 600 13px var(--font); fill: var(--ink); }
.tk-final .r { font: 400 12.5px var(--font); fill: var(--ink-2); }
.tk-final .a { font: 650 13.5px var(--font); font-variant-numeric: tabular-nums; }
.tk-final .a.fare { fill: #0f766e; } .tk-final .a.founder { fill: var(--ink); } .tk-final .a.nft { fill: #4a3bd6; }
.tk-final .n { font: 400 11px var(--font); fill: var(--muted); }
.tk-e { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-e.ink { stroke: var(--ink); } .tk-e.nft { stroke: var(--accent); } .tk-e.fare { stroke: var(--tk-fare); }
.tk-e.rail { stroke: var(--tk-rail); stroke-dasharray: 6 5; } .tk-e.grey { stroke: var(--muted-2); }
.tk-ah-ink { fill: var(--ink); } .tk-ah-nft { fill: var(--accent); } .tk-ah-fare { fill: var(--tk-fare); }
.tk-ah-rail { fill: var(--tk-rail); } .tk-ah-grey { fill: var(--muted-2); }
.tk-e.gov { stroke: var(--tk-gov); } .tk-e.vote { stroke: var(--tk-gov); stroke-dasharray: 6 5; }
.tk-ah-gov, .tk-ah-vote { fill: var(--tk-gov); } .tk-dot.gov { fill: var(--tk-gov); }
.tk-govc rect { fill: #fff; stroke: var(--tk-gov); stroke-width: 1.4; stroke-dasharray: 5 4; }
.tk-govc .h { font: 600 13px var(--font); fill: var(--ink); }
.tk-govc .r { font: 400 12px var(--font); fill: var(--muted); }
.tk-govc .r.on { font-weight: 600; fill: #9a4a05; }
.tk-chip text { font: 600 10px var(--mono); fill: #fff; }
.tk-chip.base rect { fill: #0052ff; } .tk-chip.eth rect { fill: #5b4fd6; }
.tk-src rect.bg { fill: #fff; stroke: var(--tk-rail); stroke-width: 1.4; stroke-dasharray: 5 4; }
.tk-src .h { font: 600 13px var(--font); fill: var(--ink); }
.tk-src .r { font: 400 12px var(--font); fill: var(--ink-2); }
.tk-src .c { font: 600 10.5px var(--mono); fill: #0052ff; }
.tk-lg-chain { gap: 6px !important; } .tk-lg-chain i { width: auto !important; border: 0 !important; font: 600 10px/1 var(--mono); font-style: normal; color: #fff; padding: 4px 6px; border-radius: 5px; }
.tk-lg-chain.base i { background: #0052ff; } .tk-lg-chain.eth i { background: #5b4fd6; }
.tk-el { font: 600 12px var(--font); }
.tk-el.ink { fill: var(--ink-2); } .tk-el.nft { fill: #4a3bd6; } .tk-el.fare { fill: #0f766e; } .tk-el.rail { fill: #7e22ce; } .tk-el.grey { fill: var(--muted); }

/* Dark card (tokenomics.html keeps its own copy inline so it still wins over .tk-source there) */
.tk-fare-dark { overflow: hidden; background:
    radial-gradient(520px 260px at 0% 0%, rgba(108, 92, 255, 0.099), transparent 65%),
    radial-gradient(420px 240px at 100% 100%, rgba(25, 201, 182, 0.077), transparent 65%), #f8f8fb; color: var(--ink); border: 1px solid rgba(108, 92, 255, .22); }
.tk-fare-dark h3 { color: var(--ink); }
.tk-fare-dark .check-list li { color: var(--ink-2); font-size: 15px; }
.tk-fare-dark .check-list li svg { color: #0d9488; }

/* CEO, DAO and hard-coded rules */
.tk-roles-head { margin-top: 96px; }
.tk-roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.tk-role-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 40px; }
.tk-role-cols > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: st; }
.tk-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-size: 15px; color: var(--muted); }
.tk-steps li::before { counter-increment: st; content: counter(st); width: 26px; height: 26px; border-radius: 50%; background: var(--tk-gov-soft); color: #9a4a05; font: 600 13px/26px var(--mono); text-align: center; }
.tk-steps b { color: var(--ink); font-weight: 600; }
.tk-role { padding: 32px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tk-role .tk-tag { align-self: flex-start; font: 600 13px/1 var(--mono); padding: 7px 11px; border-radius: 999px; }
.tk-tag-mgr { background: var(--bg-alt); color: var(--ink-2); } .tk-tag-dao { background: var(--tk-gov-soft); color: #9a4a05; }
.tk-tag-fixed { background: #efedff; color: #4a3bd6; }
.tk-role h3, .tk-role p { margin: 0; } .tk-role > p { color: var(--muted); font-size: 15.5px; }
.tk-role h4 { margin: 10px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.tk-role .check-list { gap: 10px; } .tk-role .check-list li { font-size: 15px; }
.tk-role .check-list li svg { color: var(--tk-fare); } .tk-role .tk-x li svg { color: #d4483b; } .tk-role .tk-how li svg { color: var(--tk-gov); }
.tk-role .tk-role-note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted); }
.tk-role-fixed { grid-column: 1 / -1; }
.tk-role-fixed .check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.tk-role-fixed > p { color: var(--muted); } .tk-role-fixed .check-list li svg { color: #0d9488; }

/* Sliders */
.tk-ctl { display: grid; gap: 10px; }
.tk-ctl-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.tk-ctl-h b { font: 500 20px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-ctl input[type="range"] { width: 100%; accent-color: var(--accent); height: 22px; margin: 0; cursor: pointer; }
.tk-ctl-scale { display: flex; justify-content: space-between; font: 500 11.5px var(--font); font-variant-numeric: tabular-nums; color: var(--muted-2); }

@media (max-width: 980px) {
  .tk-role-fixed .check-list { grid-template-columns: minmax(0, 1fr); }
  .tk-role-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .tk-role { padding: 24px; }
  .tk-figure { padding: 18px 16px 14px; }
}

/* Operations bots on the lines they run, and the guardian beside the DAO (owner, 2026-10-28: 「bot 就要畫 bot 的樣子」) */
.tk-bot .b { fill: #efedff; stroke: #6c5cff; stroke-width: 1.6; }
.tk-bot .ic rect, .tk-bot .ic path, .tk-pill.bot .ic rect, .tk-pill.bot .ic path, .tk-lg-bot rect, .tk-lg-bot path { fill: none; stroke: #6c5cff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tk-bot .ic .e, .tk-pill.bot .ic .e, .tk-lg-bot .e { fill: #6c5cff; stroke: none; }
.tk-bot text { font: 600 11px var(--font); fill: #4a3bd6; }
.tk-guard > rect { fill: #fff8ef; stroke: #c2620a; stroke-width: 1.6; stroke-dasharray: 5 4; }
.tk-guard .b { fill: #fff4e6; stroke: #c2620a; stroke-width: 1.6; }
.tk-guard .ic path, .tk-lg-guard path { fill: none; stroke: #c2620a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tk-guard .t { font: 600 14px var(--font); fill: var(--ink); }
.tk-guard .s { font: 400 12px var(--font); fill: var(--muted); }
.tk-flow-legend .tk-lg-ic svg { width: 20px; height: 20px; flex: none; }