/* kavijat — styles of this view only. The design system lives in ../crm.css; use its tokens and components. */

/* head: the title, the period between its arrows, the range quietly after it; Viikko · 30 pv and ⓘ at the right */
.kv-head{align-items:center}
.kv-period{display:inline-flex; align-items:center; gap:2px; min-width:0}
.kv-period-label{padding:0 6px; font:600 15px/1.3 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink); white-space:nowrap}
.kv-period-range{margin-left:10px; font-size:14px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.kv-head .page-actions{gap:6px}
.kv-info{display:flex; flex-direction:column; gap:6px; padding:10px 12px; font-size:13px; line-height:1.5; color:var(--ink-2)}
.kv-info p:last-child{color:var(--ink-3)}

/* a new period loads under the old numbers, dimmed, so nothing jumps */
.kv-body{transition:opacity .15s ease-out}
.kv-body.is-busy{opacity:.5}
.kv-body > .band:first-child{margin-top:0}
.kv-skel-val{width:46%; height:40px; margin:8px 0; border-radius:8px}
/* footnote lines; the contact split breaks between its parts and the dot that would start a line is clipped away */
.kv-foot{overflow:hidden}
.kv-foot-line{display:block}
.kv-split{display:flex; flex-wrap:wrap; margin-left:-1em}
.kv-split > span{white-space:nowrap}
.kv-split > span::before{content:'·'; display:inline-block; width:1em; text-align:center}

/* 2 Mistä tullaan */
.kv-src{table-layout:fixed}
.kv-src .kv-c-src{width:30%}
.kv-src .kv-c-n{width:15%}
.kv-src td{height:56px}
.kv-src .bar-cell{max-width:460px}
.kv-src-name{font-size:14px; line-height:1.35; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-src-sub{font-size:13px; line-height:1.35; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-src-p{grid-template-columns:minmax(0,1fr) auto; min-height:56px; padding-top:8px; padding-bottom:8px}
.kv-src-p-l{min-width:0}
.kv-src-p-r{text-align:right}
.kv-src-v{font-size:14px; line-height:1.35; font-variant-numeric:tabular-nums; white-space:nowrap}
.kv-src-p-r .kv-src-sub{font-variant-numeric:tabular-nums}

/* 3 Miten liikutaan: the Sankey on paper */
.kv-sankey{position:relative; margin-top:6px}
.kv-flow{display:block; overflow:visible; -webkit-user-select:none; user-select:none}
.kv-col-h{font:400 13px var(--f-ui); fill:var(--ink-3)}
.kv-band{fill:var(--ink); fill-opacity:.10; stroke:transparent; stroke-width:4px; transition:fill-opacity .15s ease-out}
.kv-band.is-contact{fill:var(--rust); fill-opacity:.35}
.kv-flow.is-focus .kv-band{fill-opacity:.045}
.kv-flow.is-focus .kv-band.is-contact{fill-opacity:.16}
.kv-flow.is-focus .kv-band.is-hot{fill-opacity:.24}
.kv-flow.is-focus .kv-band.is-contact.is-hot{fill-opacity:.7}
.kv-bar{fill:var(--ink)}
.kv-node.is-muut .kv-bar{fill:var(--ink-3)}
.kv-node.is-yhteys .kv-bar{fill:var(--rust)}
.kv-node{outline:none; transition:opacity .15s ease-out}
.kv-flow.is-focus .kv-node:not(.is-hot){opacity:.4}
/* the words sit on the bands with a paper halo, so they stay readable wherever a band runs under them */
.kv-label{font:500 13px var(--f-ui); fill:var(--ink); stroke:var(--bg); stroke-width:4px; stroke-linejoin:round; paint-order:stroke}
.kv-label .n{font-weight:400; fill:var(--ink-3); font-variant-numeric:tabular-nums}
.kv-node.is-yhteys .kv-label{fill:var(--rust); font-weight:600}
.kv-ring{fill:none; stroke:none}
.kv-node:focus-visible .kv-ring{stroke:var(--ink); stroke-width:2px}
.kv-tip{position:absolute; z-index:5; min-width:150px; max-width:280px; padding:9px 12px 10px; border-radius:var(--r-pop); background:var(--surface); box-shadow:var(--shadow-2); pointer-events:none}
.kv-tip-v{font:600 14px/1.4 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink)}
.kv-tip-l{font-size:13px; line-height:1.45; color:var(--ink-2)}
.kv-tip-c{font-size:13px; line-height:1.45; font-weight:500; color:var(--rust)}

/* the commonest paths: plain text on paper, the numbers in two narrow columns */
.kv-paths{margin-top:40px; max-width:640px}
.kv-paths .sec-h{margin-bottom:6px}
.kv-path-grid{display:flex; flex-direction:column}
.kv-path-row{display:grid; grid-template-columns:minmax(0,1fr) 72px 112px; column-gap:24px; align-items:baseline; padding:6px 0; font-size:14px; line-height:1.45}
.kv-path-row > .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.kv-path-head{padding:4px 0 6px; font-size:13px; color:var(--ink-3)}
.kv-sep{color:var(--ink-3)}
.kv-step{white-space:nowrap}

/* 4 Sivut: a page row opens to its buttons */
.kv-pages{table-layout:fixed}
.kv-pages .kv-c-page{width:36%}
.kv-pages tbody tr.is-open td{background:color-mix(in srgb, var(--surface) 45%, var(--bg))}
.kv-pg-toggle{display:inline-flex; align-items:center; gap:8px; max-width:100%; margin:0 0 0 -4px; padding:4px; border:0; border-radius:6px; background:none; color:var(--ink); font:400 14px/1.4 var(--f-ui); text-align:left; cursor:pointer}
.kv-pg-toggle > span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-pg-toggle .icon,.kv-pg-p-row .icon{color:var(--ink-3); transition:transform .18s ease-out}
.kv-pg-toggle[aria-expanded="true"] .icon,.kv-pg-p-row[aria-expanded="true"] .icon{transform:rotate(90deg); color:var(--ink)}
.kv-pg-toggle:focus-visible{outline-offset:0}
.kv-pg-name{display:block; padding-left:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-pages .kv-pg-detail td{height:auto; padding:2px 20px 20px 44px; border-top:0; background:color-mix(in srgb, var(--surface) 45%, var(--bg))}
.kv-btns{display:flex; flex-direction:column; gap:4px; max-width:620px}
.kv-btns li{display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center; column-gap:24px; min-height:26px; font-size:13px; color:var(--ink-2)}
.kv-btn-l{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-btns .bar-n{color:var(--ink)}
/* phone: two lines per page, the same buttons under it */
.kv-pg-p > .row{grid-template-columns:16px minmax(0,1fr); column-gap:10px; align-items:start; padding-top:12px; padding-bottom:12px}
.kv-pg-p > .row .icon{margin-top:3px}
.kv-pg-p > * + .row{border-top:1px solid var(--line)}
.kv-pg-p-lines{display:flex; flex-direction:column; gap:2px; min-width:0}
.kv-pg-p-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:15px; line-height:1.35; color:var(--ink)}
.kv-pg-p-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-pg-p-n{flex:none; font-size:14px; font-variant-numeric:tabular-nums; color:var(--ink)}
.kv-pg-p-meta{font-size:13px; line-height:1.4; color:var(--ink-3)}
.kv-pg-p-detail{padding:0 16px 16px 42px}
.kv-pg-p-detail .kv-btns li{grid-template-columns:minmax(0,1fr) 120px; column-gap:12px; min-height:32px}

/* 5 Viimeisimmät käynnit: a day heading, then one line per käynti */
.kv-sess-day{padding:16px 20px 4px; font:600 13px/1.4 var(--f-ui); color:var(--ink)}
.kv-sess > * + .kv-sess-day{border-top:1px solid var(--line); margin-top:4px}
.kv-sess .kv-sess-row{grid-template-columns:44px 250px minmax(0,1fr); align-items:baseline; min-height:44px; padding-top:11px; padding-bottom:11px}
.kv-sess .kv-sess-day + .kv-sess-row{border-top:0}
.kv-sess-t{font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums}
.kv-sess-src{min-width:0; font-size:13px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kv-sess-path{min-width:0; font-size:14px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere}
.kv-sess-path .is-click{color:var(--ink-2)}
.kv-sess-path .is-contact{color:var(--rust); font-weight:500}
.kv-sess-row:focus-visible{outline-offset:-2px}

@media (max-width:1023px){
  .kv-btns li{grid-template-columns:minmax(0,1fr) 200px}
}
@media (max-width:759px){
  /* one row on a phone: ‹ period › at the left, Viikko · 30 pv and ⓘ at the right */
  .kv-head{flex-wrap:nowrap; column-gap:8px}
  .kv-head .page-actions{width:auto; margin-left:auto; flex:none}
  .kv-head .seg-s > button{padding:0 10px}
  .kv-period{margin-left:-8px}
  .kv-period-label{padding:0 2px; font-size:14px}
  .kv-paths{margin-top:28px}
  .kv-path-row{grid-template-columns:minmax(0,1fr) 44px 80px; column-gap:12px}
  .kv-sess-day{padding:14px 16px 2px}
  .kv-sess .kv-sess-row{grid-template-columns:auto minmax(0,1fr); column-gap:10px; row-gap:2px}
  .kv-sess-path{grid-column:1 / -1}
}