/* Kortex shared analytics views (table, graphs, spider, field map, sky), the Action Center,
   the findings cards and the workspace queue.
   One stylesheet for kaayko.com/kortex, /kortex/samples and the admin.
   Colours resolve from the host page's tokens, with the Kortex palette as fallback. */
.views { margin-top:18px }
.views-nav, .ac-tabs { display:flex; gap:16px; border-bottom:1px solid var(--gold-line, rgba(181,147,90,.28)); margin-bottom:12px; flex-wrap:wrap }
.views-nav button, .ac-tabs button { background:none; border:0; border-bottom:1px solid transparent; margin-bottom:-1px; padding:8px 2px; min-height:44px; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:0.95rem; letter-spacing:0.08em; color:var(--muted, rgba(237,232,223,.72)); cursor:pointer }
.views-nav button[aria-pressed="true"], .ac-tabs button[aria-pressed="true"] { color:var(--gold-bright, #d9bd7b); border-bottom-color:var(--gold, #b5935a) }
.views-nav button:focus-visible, .ac-tabs button:focus-visible { outline:1px solid var(--gold-bright, #d9bd7b); outline-offset:4px }
.view-pane, .ac-pane { min-width:0 }
.k-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch }
.k-table { width:100%; border-collapse:collapse; font-size:0.92rem; font-variant-numeric:tabular-nums; min-width:0 }
.k-table th { text-align:left; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-weight:500; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold, #b5935a); padding:6px 10px 6px 0; border-bottom:1px solid var(--gold-line, rgba(181,147,90,.28)) }
.k-table td { padding:7px 10px 7px 0; border-bottom:1px solid rgba(181,147,90,0.1); color:var(--muted, rgba(237,232,223,.72)); vertical-align:top }
.k-table td.n, .k-table th.n { text-align:right; font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:0.84rem }
.k-table td b { color:var(--fg, #ede8df); font-weight:500 }
.k-table tr[data-tip]:hover td { color:var(--fg, #ede8df) }
.k-table .bar-cell { position:relative; min-width:120px }
.k-table .bar-cell i { display:block; height:5px; background:linear-gradient(90deg, var(--gold, #b5935a), var(--gold-bright, #d9bd7b)); border-radius:1px }
.k-tables { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px }
.k-tables .k-table { min-width:0 }
.graph-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px }
.graph-grid > div { min-width:0 }
.k-tables h5, .graph-grid h5, .radar-wrap h5, .sky-wrap h5, .fm-wrap h5, .ac-section h5, .ac-empty h5 { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold, #b5935a); font-weight:500; margin:0 0 10px }
.k-tables h5 { margin-bottom:6px }
.graph-grid .bars { display:flex; gap:4px; align-items:flex-end; height:120px; position:relative; margin-bottom:22px }
.graph-grid .bar { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; position:relative }
.graph-grid .bar i { display:block; width:100%; background:linear-gradient(180deg, var(--gold-bright, #d9bd7b), var(--gold, #b5935a)); border-radius:1px 1px 0 0; min-height:2px }
.graph-grid .bar:hover i { filter:brightness(1.35) }
.graph-grid .bar span { position:absolute; bottom:-18px; font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:0.68rem; color:var(--muted, rgba(237,232,223,.72)); white-space:nowrap }
/* Dense charts (a month of days, 24 hours) keep every sixth label so they never overlap. */
.graph-grid .bars.dense { gap:2px }
.graph-grid .bars.dense .bar span { display:none }
.graph-grid .bars.dense .bar:nth-child(6n+1) span { display:block }
.radar-wrap { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:center }
.radar-wrap svg { width:100%; max-width:360px; height:auto; display:block; margin:0 auto }
.radar-legend { list-style:none; font-size:0.94rem; color:var(--muted, rgba(237,232,223,.72)); margin:0; padding:0 }
.radar-legend li { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid rgba(181,147,90,0.1) }
.radar-legend b { color:var(--fg, #ede8df); font-weight:500; font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:0.86rem }
.sky-wrap canvas { width:100%; max-width:560px; height:auto; display:block; margin:0 auto; aspect-ratio:1 }
.sky-legend, .fm-legend { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:0.86rem; color:var(--muted, rgba(237,232,223,.72)); margin-top:10px }
.sky-legend i, .fm-legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle }
.mono { font-family:var(--mono, ui-monospace, Menlo, monospace) }

/* ── Field Map: source → device → route → outcome → place, drawn as ribbons ── */
.fm-wrap { min-width:0 }
.fm { position:relative; min-width:0 }
.fm-head { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:28px; margin-bottom:6px; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:0.86rem; color:var(--dim, rgba(237,232,223,.62)) }
.fm-chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border:1px solid var(--gold-line, rgba(181,147,90,.28)); border-radius:999px; font-family:var(--mono, ui-monospace, Menlo, monospace); font-style:normal; font-size:0.74rem; color:var(--fg, #ede8df); white-space:nowrap }
.fm-chip b { font-weight:500 }
.fm-chip button { background:none; border:0; padding:0 2px; min-height:24px; color:var(--gold-bright, #d9bd7b); font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:2px }
.fm svg { display:block; width:100%; height:auto; overflow:visible }
.fm text { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:11px; pointer-events:none }
.fm .fm-col { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:11px; letter-spacing:0.16em; fill:var(--gold, #b5935a) }
.fm .fm-count { font-size:10px; opacity:0.75 }
.fm-c-source { --fm-c:var(--fm-source, #b5935a) }
.fm-c-tap { --fm-c:var(--fm-tap, #4ec9e0) }
.fm-c-device { --fm-c:var(--fm-device, #a97ad4) }
.fm-c-route { --fm-c:var(--fm-route, #3dd68c) }
.fm-c-delivered { --fm-c:var(--fm-delivered, #3dd68c) }
.fm-c-rescued { --fm-c:var(--fm-rescued, #e7ab4b) }
.fm-c-lost { --fm-c:var(--fm-lost, #ef6b6b) }
.fm-c-place { --fm-c:var(--fm-place, #cdd6ec) }
.fm-legend i { background:var(--fm-c) }
.fm .fm-node { cursor:pointer; outline:none }
.fm-node rect { fill:var(--fm-c); fill-opacity:0.9; stroke:rgba(0,0,0,0.45); stroke-width:1 }
.fm-node text { fill:#0b0d14 }
.fm-node text.out { fill:var(--fg, #ede8df) }
.fm-node:hover rect, .fm-node:focus-visible rect { stroke:var(--gold-bright, #d9bd7b); stroke-width:1.5 }
.fm-node[aria-pressed="true"] rect { stroke:#fff; stroke-width:1.5 }
/* A block whose share is too thin to draw is raised to the minimum size; the dashed
   edge says the height is a legibility floor and not a quantity. */
.fm-node.is-floored rect { stroke:var(--fg, #ede8df); stroke-opacity:0.5; stroke-dasharray:3 2 }
.fm-node.is-floored:hover rect, .fm-node.is-floored:focus-visible rect { stroke:var(--gold-bright, #d9bd7b); stroke-opacity:1 }
.fm-note { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:0.82rem; color:var(--muted, rgba(237,232,223,.6)); text-align:center; margin:8px auto 0; max-width:62ch; line-height:1.5 }
.fm-edge { fill:var(--fm-c); fill-opacity:0.3 }
.fm-edge:hover, .fm-edge.is-on { fill-opacity:0.62 }
.fm svg.is-focus .fm-edge:not(.is-on) { fill-opacity:0.05 }
.fm svg.is-focus .fm-node:not(.is-on) { opacity:0.3 }
.fm-node, .fm-edge { transition:opacity .18s ease, fill-opacity .18s ease }
.fm-list { list-style:none; margin:0; padding:0 }
.fm-list li { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; gap:10px; align-items:center; min-height:44px; padding:8px 0; border-bottom:1px solid rgba(181,147,90,0.1); font-size:0.9rem; color:var(--muted, rgba(237,232,223,.72)) }
.fm-list li span { min-width:0; overflow-wrap:anywhere }
.fm-list li b { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:0.86rem; font-weight:500; color:var(--fg, #ede8df) }
.fm-list li small { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:0.74rem; color:var(--dim, rgba(237,232,223,.62)) }
.fm-note { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:0.86rem; color:var(--muted, rgba(237,232,223,.72)); margin:8px 0 0 }

/* ── Findings cards (shared by the Action Center, the Explore tabs and the samples) ── */
.ki-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin:12px 0 18px }
.ki { position:relative; padding:14px 16px 12px; border:1px solid rgba(181,147,90,.18); background:rgba(181,147,90,.035); min-width:0 }
.ki-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap }
.ki h5 { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-weight:500; font-size:.92rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold, #b5935a); margin:0 }
.ki p { margin:0; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:.98rem; line-height:1.5; color:var(--fg, rgba(237,232,223,.82)) }
.ki-dot { width:8px; height:8px; border-radius:50%; background:#8C95A4; flex:none; box-shadow:0 0 8px rgba(0,0,0,.4) }
.ki-good .ki-dot { background:var(--fm-delivered, #3dd68c); box-shadow:0 0 8px rgba(61,214,140,.6) }
.ki-warn .ki-dot { background:var(--fm-rescued, #e7ab4b); box-shadow:0 0 8px rgba(231,171,75,.6) }
.ki-none .ki-dot { background:rgba(237,232,223,.25); box-shadow:none }
.ki-none p { color:var(--muted, rgba(237,232,223,.55)) }
.ki-sev-high .ki-dot { background:var(--fm-lost, #ef6b6b); box-shadow:0 0 8px rgba(239,107,107,.6) }
.ki-sev-medium .ki-dot { background:var(--fm-rescued, #e7ab4b); box-shadow:0 0 8px rgba(231,171,75,.6) }
.ki-sev-low .ki-dot { background:rgba(237,232,223,.45); box-shadow:none }
.ki-chip { margin-left:auto; padding:2px 8px; border-radius:999px; border:1px solid rgba(237,232,223,.3); font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted, rgba(237,232,223,.72)); white-space:nowrap }
.ki-chip-high { border-color:rgba(61,214,140,.5); color:var(--fm-delivered, #3dd68c) }
.ki-chip-medium { border-color:rgba(231,171,75,.5); color:var(--fm-rescued, #e7ab4b) }
.ki-score { margin-left:auto; font-family:var(--display, 'Bebas Neue', Impact, sans-serif); font-size:1.7rem; letter-spacing:.04em; color:var(--fg, #ede8df); line-height:1 }
.ki-chip + .ki-score { margin-left:8px }
.ki-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:.88rem; color:var(--dim, rgba(237,232,223,.62)) }
.ki-meta i { font-style:normal; color:var(--gold, #b5935a) }
.ki-need { color:var(--muted, rgba(237,232,223,.72)) }
.ki-lines { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:4px }
.ki-lines li { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:.9rem; color:var(--muted, rgba(237,232,223,.7)); line-height:1.45; padding-left:12px; position:relative }
.ki-lines li::before { content:"·"; position:absolute; left:0; color:var(--gold, #b5935a) }
.ki-bars { display:grid; gap:4px; margin-top:8px }
.ki-bars span { position:relative; display:block; font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:.88rem; color:var(--muted, rgba(237,232,223,.75)); padding:3px 0 }
.ki-bars i { position:absolute; left:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--gold, #b5935a), var(--gold-bright, #d9bd7b)) }
.ki-compact .ki { padding:10px 12px }
.ki-empty { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; color:var(--muted, rgba(237,232,223,.72)); margin:8px 0 }
.ki-actions { display:flex; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap }
.ki-cta { display:inline-flex; align-items:center; text-decoration:none; min-height:44px; padding:0 16px; border:1px solid var(--gold, #b5935a); background:rgba(181,147,90,.12); color:var(--gold-bright, #d9bd7b); font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:.95rem; letter-spacing:.06em; cursor:pointer }
.ki-cta:hover { background:rgba(181,147,90,.22) }
.ki-menu { position:relative }
.ki-menu summary { list-style:none; display:inline-flex; align-items:center; min-height:44px; padding:0 6px; cursor:pointer; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:.9rem; color:var(--muted, rgba(237,232,223,.72)); text-decoration:underline; text-underline-offset:3px }
.ki-menu summary::-webkit-details-marker { display:none }
.ki-menu div { position:absolute; z-index:5; left:0; top:100%; min-width:180px; padding:6px; display:grid; background:var(--surface, #0d0c0a); border:1px solid var(--gold-line, rgba(181,147,90,.28)); box-shadow:0 10px 30px rgba(0,0,0,.45) }
.ki-menu div button { text-align:left; min-height:44px; padding:0 10px; background:none; border:0; color:var(--fg, #ede8df); font:inherit; font-size:.9rem; cursor:pointer }
.ki-menu div button:hover { background:rgba(181,147,90,.12) }

/* ── Action Center: what was delivered, what needs a fix, what the last change did ── */
.ac { display:grid; gap:20px; margin:12px 0 18px }
.ac-metrics { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px }
.ac-metric { padding:12px 0; border-top:1px solid var(--gold-line, rgba(181,147,90,.28)); min-width:0 }
.ac-metric b { display:block; font-family:var(--display, 'Bebas Neue', Impact, sans-serif); font-size:1.9rem; letter-spacing:.04em; line-height:1; font-weight:400; color:var(--fg, #ede8df) }
.ac-metric span { display:block; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted, rgba(237,232,223,.72)); margin-top:4px }
.ac-m-lost b { color:var(--fm-lost, #ef6b6b) }
.ac-m-rescued b { color:var(--fm-rescued, #e7ab4b) }
.ac-support, .ac-low, .ac-none, .ac-empty p { margin:0; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; color:var(--muted, rgba(237,232,223,.72)) }
.ac-support { margin-top:-12px; font-size:.9rem }
.ac-section .ki-grid { margin:0 }
.ac-empty { padding:18px 0; border-top:1px solid var(--gold-line, rgba(181,147,90,.28)) }
.ac-since { display:grid; gap:4px; padding:12px 14px; border:1px solid var(--gold-line, rgba(181,147,90,.28)); background:rgba(181,147,90,.035) }
.ac-since b { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:.92rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--fg, #ede8df) }
.ac-since-improved b { color:var(--fm-delivered, #3dd68c) }
.ac-since-regressed b { color:var(--fm-lost, #ef6b6b) }
.ac-since-pending b { color:var(--muted, rgba(237,232,223,.72)) }
.ac-since span { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size:.9rem; color:var(--dim, rgba(237,232,223,.62)) }
.ac-since p { margin:2px 0 0; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; color:var(--muted, rgba(237,232,223,.72)) }

/* ── Workspace queue: where ten minutes go first ── */
.kq-sub { font-size:.92rem; color:var(--dim, rgba(237,232,223,.62)) }
.kq-issue { max-width:34ch; font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic }
.kq-open { min-height:44px; padding:0 12px; border:1px solid var(--gold-line, rgba(181,147,90,.28)); background:none; color:var(--gold-bright, #d9bd7b); font:inherit; font-size:.86rem; cursor:pointer; white-space:nowrap }
.kq-open:hover { border-color:var(--gold, #b5935a) }
.kq-empty, .kq-note { font-family:var(--serif, 'Cormorant Garamond', Georgia, serif); font-style:italic; color:var(--muted, rgba(237,232,223,.72)); margin:8px 0 }

@media (max-width: 640px) { .k-tables, .graph-grid, .radar-wrap { grid-template-columns:minmax(0, 1fr) } .ac-metrics { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (prefers-reduced-motion: reduce) { .fm-node, .fm-edge { transition:none } }

.ac-plain { font-style:italic; font-size:1.08rem; line-height:1.55; color:var(--fg, #ede8df); margin:0 0 14px; max-width:60ch }

/* Room to work (16 Sep 2026): more tables and cards per row when the screen allows. */
@media (min-width:1100px) { .k-tables { grid-template-columns:repeat(3, minmax(0, 1fr)) } .graph-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (min-width:1500px) { .k-tables { grid-template-columns:repeat(4, minmax(0, 1fr)) } .graph-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) } .ki-grid { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) } }
