/* Hyperfocus Time Journal (analytics view) — ported 1:1 from Noa's mock
   (hyperfocus_analytics_mock.html). Tokens from tokens.css. */

.journal { flex: 1; min-width: 0; overflow-y: auto; height: calc(100vh - 52px); }
.view-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-8) var(--space-8) 96px; }

/* view header */
.view-head { display: flex; align-items: flex-end; gap: var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; }
.view-head .titlewrap { margin-right: auto; }
.view-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.view-title { font-size: 24px; font-weight: 600; letter-spacing: -0.5px; color: var(--text-primary); }
.view-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.month-nav { display: flex; align-items: center; gap: 2px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 3px; }
.month-nav button { width: 30px; height: 30px; border: none; background: transparent; cursor: pointer; color: var(--text-secondary); border-radius: var(--radius-sm); display: grid; place-items: center; }
.month-nav button:hover { background: var(--bg-elevated); color: var(--text-primary); }
.month-nav .label { font-size: 13px; font-weight: 500; color: var(--text-primary); padding: 0 12px; min-width: 116px; text-align: center; }
.rate-control { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); height: 36px; padding: 0 12px; }
.rate-control .rl { font-size: 11px; color: var(--text-tertiary); }
.rate-control input { width: 56px; background: transparent; border: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; font-weight: 500; text-align: right; }
.rate-control input:focus { outline: none; }
.rate-control .unit { font-size: 11px; color: var(--text-secondary); }

/* KPI strip */
.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-4); margin-bottom: var(--space-8); }
.kpi { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 16px 18px 15px; display: flex; flex-direction: column; gap: 10px; }
.kpi .k-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.2px; color: var(--text-tertiary); }
.kpi .k-label svg { width: 13px; height: 13px; flex: none; }
.kpi .k-value { font-family: var(--font-mono); font-size: 26px; font-weight: 500; line-height: 1; color: var(--text-primary); letter-spacing: -0.5px; display: flex; align-items: baseline; gap: 3px; }
.kpi .k-value .unit { font-size: 13px; font-weight: 400; color: var(--text-secondary); letter-spacing: 0; }
.kpi.k-cost { box-shadow: inset 0 2px 0 -1px var(--accent-tint-strong); }
.kpi.k-cost .k-label { color: var(--accent); }

/* split: calendar + leaderboard */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-4); margin-bottom: var(--space-8); align-items: start; }
.panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.panel-head { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); }
.panel-head .pt { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.panel-head .ps { font-size: 11px; color: var(--text-tertiary); }
.panel-head .right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.panel-body { padding: 18px; }

/* calendar */
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 7px; }
.cal-weekdays span { font-size: 10px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-tertiary); text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell { aspect-ratio: 1; border-radius: 6px; background: var(--bg-input); padding: 6px 7px; display: flex; flex-direction: column; position: relative; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.cal-cell:hover { transform: translateY(-1px); box-shadow: var(--elev-2); }
.cal-cell .dnum { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--text-tertiary); }
.cal-cell .dtime { font-family: var(--font-mono); font-size: 10px; margin-top: auto; align-self: flex-end; color: var(--text-tertiary); }
.cal-cell.out { background: transparent; cursor: default; }
.cal-cell.out:hover { transform: none; box-shadow: none; }
.cal-cell.out .dnum { color: rgba(100,106,119,0.45); }
.cal-cell.h1 { background: rgba(124,108,240,0.16); }
.cal-cell.h2 { background: rgba(124,108,240,0.34); }
.cal-cell.h2 .dtime, .cal-cell.h2 .dnum { color: var(--text-secondary); }
.cal-cell.h3 { background: rgba(124,108,240,0.55); }
.cal-cell.h3 .dtime { color: var(--text-primary); } .cal-cell.h3 .dnum { color: rgba(233,234,238,0.85); }
.cal-cell.h4 { background: rgba(124,108,240,0.82); }
.cal-cell.h4 .dtime { color: #fff; } .cal-cell.h4 .dnum { color: rgba(255,255,255,0.9); }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.cal-cell.sel { box-shadow: inset 0 0 0 1.5px var(--accent-hover), var(--elev-2); }
.cal-legend { display: flex; align-items: center; gap: 7px; }
.cal-legend .ll { font-size: 10px; color: var(--text-tertiary); }
.cal-legend .ramp { display: flex; gap: 3px; }
.cal-legend .rs { width: 13px; height: 13px; border-radius: 3px; }
.rs.r0 { background: var(--bg-input); border: 1px solid var(--border-subtle); }
.rs.r1 { background: rgba(124,108,240,0.16); }
.rs.r2 { background: rgba(124,108,240,0.34); }
.rs.r3 { background: rgba(124,108,240,0.55); }
.rs.r4 { background: rgba(124,108,240,0.82); }
.day-detail { margin-top: 16px; border-top: 1px solid var(--border-subtle); padding-top: 14px; }
.dd-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.dd-date { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.dd-total { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-left: auto; }
.dd-empty { font-size: 12px; color: var(--text-tertiary); }

/* time-sink leaderboard */
.sink-row { display: flex; align-items: center; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.sink-row:last-child { border-bottom: none; }
.sink-row .rank { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); width: 16px; flex: none; text-align: right; }
.sink-main { flex: 1; min-width: 0; }
.sink-main .st { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sink-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cat-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.2px; color: var(--text-secondary); }
.cat-tag .cdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sink-share { font-family: var(--font-mono); font-size: 10px; color: var(--text-tertiary); }
.sink-right { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.sink-total { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--text-primary); }
.deleg-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-tint-strong); border-radius: var(--radius-full); padding: 2px 8px; cursor: help; }

/* rollups table */
.rollups { margin-bottom: var(--space-8); }
.roll-controls { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--bg-input); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2px; gap: 1px; }
.seg button { border: none; background: transparent; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-secondary); padding: 5px 12px; border-radius: 6px; }
.seg button:hover { color: var(--text-primary); }
.seg button.on { background: var(--accent-tint); color: var(--accent); }
.seg-label { font-size: 11px; color: var(--text-tertiary); margin-right: 2px; }
.rtable { width: 100%; border-collapse: collapse; }
.rtable thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; color: var(--text-tertiary); text-align: right; padding: 11px 18px; border-bottom: 1px solid var(--border-subtle); white-space: nowrap; cursor: pointer; }
.rtable thead th:first-child { text-align: left; }
.rtable thead th:hover { color: var(--text-secondary); }
.rtable thead th.sorted { color: var(--accent); }
.rtable tbody td { padding: 11px 18px; border-bottom: 1px solid var(--border-subtle); text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-primary); white-space: nowrap; }
.rtable tbody tr:last-child td { border-bottom: none; }
.rtable tbody tr:hover { background: var(--bg-elevated); }
.rtable tbody td.entity { text-align: left; font-family: var(--font-sans); font-weight: 450; }
.ent { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ent .edot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ent .ename { color: var(--text-primary); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* value×effort matrix */
.matrix-panel .panel-body { padding: 22px 24px 18px; }
.matrix-wrap { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: 1fr 22px; gap: 8px; }
.m-yaxis { grid-column: 1; grid-row: 1; display: grid; place-items: center; }
.m-yaxis span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-tertiary); }
.m-plot { grid-column: 2; grid-row: 1; position: relative; height: 340px; background: var(--bg-input); border-radius: var(--radius-md); overflow: hidden; }
.m-plot .vline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-default); }
.m-plot .hline { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border-default); }
.m-deleg { position: absolute; right: 0; bottom: 0; width: 50%; height: 50%; background: rgba(124,108,240,0.07); border-left: 1px dashed var(--accent-tint-strong); border-top: 1px dashed var(--accent-tint-strong); }
.m-qlabel { position: absolute; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-tertiary); text-transform: uppercase; }
.m-qlabel.tl { top: 10px; left: 12px; } .m-qlabel.tr { top: 10px; right: 12px; text-align: right; }
.m-qlabel.bl { bottom: 10px; left: 12px; } .m-qlabel.br { bottom: 12px; right: 12px; text-align: right; color: var(--accent); }
.m-dot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); border: 1.5px solid var(--bg-input); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.m-dot:hover { transform: translate(-50%, -50%) scale(1.3); z-index: 5; }
.m-dot.flagged { box-shadow: 0 0 0 2px var(--accent); }
.m-xaxis { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-tertiary); }
.cat-deepc { color: var(--cat-deep); } .cat-opsc { color: var(--cat-ops); } .cat-growthc { color: var(--cat-growth); }
.cat-creativec { color: var(--cat-creative); } .cat-personalc { color: var(--cat-personal); } .cat-bugc { color: var(--cat-bug); }
.cat-nonec { color: var(--text-tertiary); }

/* view switch in topbar */
.view-switch { display: inline-flex; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 2px; }
.view-switch button { border: none; background: transparent; color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 14px; border-radius: 6px; cursor: pointer; }
.view-switch button.on { background: var(--accent-tint); color: var(--accent); }

@media (max-width: 1080px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } .split { grid-template-columns: 1fr; } }