/* Dashboard --------------------------------------------------------------------------------
   Data-dense but calm. The heatmap is the centrepiece because it answers "have I been using
   this" at a glance, which is the question people actually open a dashboard to answer. */

.dash { padding: 120px 24px 90px; }

.dash-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 34px; }
.kicker { font-size: 13px; color: var(--dim); font-family: var(--mono); margin-bottom: 8px; }
.dash-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }

.plan-badge {
	margin-left: auto; padding: 7px 15px; border-radius: 999px;
	border: 1px solid var(--line-strong); background: var(--raised);
	font-size: 13px; font-weight: 600; letter-spacing: .01em; text-transform: capitalize;
}
/* Paid plans get the warm accent, so the badge reads as status rather than decoration. */
.plan-badge.paid { border-color: rgba(201, 162, 39, .45); color: #e8c766; }

.stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 22px; }
.stat {
	padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line);
	background: var(--surface);
}
.stat .label { font-size: 12.5px; color: var(--dim); margin-bottom: 9px; }
.stat .value { font-size: 1.9rem; font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.stat .sub { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* The allowance bar. Fills from the left; turns warm as it runs down, which is the only place
   colour carries meaning on this page. */
.meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.07); margin-top: 12px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--fg); transition: width .8s cubic-bezier(.2,.7,.3,1); }
.meter.low i { background: #c9a227; }
.meter.spent i { background: #c07b7b; }

.card-lg {
	padding: 26px; border-radius: var(--radius-lg); border: 1px solid var(--line);
	background: var(--surface); margin-bottom: 18px;
}
.card-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.card-head h2 { font-size: 1.05rem; letter-spacing: -.01em; }
.card-head p { font-size: 13px; color: var(--dim); margin-left: auto; }

/* Heatmap ---------------------------------------------------------------------------------
   Columns are weeks, rows are days — the layout everyone already knows how to read, so it
   needs no legend beyond less/more. */
.heat {
	display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 1fr);
	gap: 3px; overflow-x: auto; padding-bottom: 4px;
}
.heat .sq, .heat-legend .sq {
	width: 11px; height: 11px; border-radius: 2.5px; background: rgba(255,255,255,.05);
}
/* A single hue ramped by opacity rather than five separate colours: it stays legible in the
   monochrome palette and reads as one quantity getting larger. */
.sq.l1 { background: rgba(111, 174, 139, .32); }
.sq.l2 { background: rgba(111, 174, 139, .52); }
.sq.l3 { background: rgba(111, 174, 139, .74); }
.sq.l4 { background: rgba(111, 174, 139, .95); }
.heat .sq { transition: transform .12s ease; }
.heat .sq:hover { transform: scale(1.45); }

.heat-legend { display: flex; align-items: center; gap: 5px; margin-top: 14px; font-size: 11.5px; color: var(--dim); }
.heat-legend .sq { width: 10px; height: 10px; }
.heat-legend span:first-child { margin-right: 3px; }
.heat-legend span:last-child { margin-left: 3px; }

.two-col { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; } }

.rows { display: flex; flex-direction: column; gap: 2px; }
.row {
	display: flex; align-items: center; gap: 12px; padding: 11px 12px;
	border-radius: 10px; transition: background .15s ease;
}
.row:hover { background: var(--raised); }
.row .name { font-size: 14.5px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { margin-left: auto; font-size: 12.5px; color: var(--dim); font-family: var(--mono); flex: none; }
.row .glyph {
	width: 28px; height: 28px; border-radius: 8px; flex: none;
	display: grid; place-items: center; font-family: var(--mono); font-size: 12px;
	background: var(--raised); border: 1px solid var(--line); color: var(--muted);
}
.empty-row { padding: 14px 12px; color: var(--dim); font-size: 14px; }

/* Heatmap tooltip -------------------------------------------------------------------------
   A real tooltip rather than the browser's `title`, which takes about a second to appear and
   cannot be styled — on a grid you scrub across, a delay that long means it never shows. */
.tip {
	position: fixed; z-index: 80; pointer-events: none;
	padding: 8px 11px; border-radius: 9px;
	border: 1px solid var(--line-strong); background: #14161c;
	box-shadow: 0 8px 26px rgba(0, 0, 0, .5);
	font-size: 12.5px; line-height: 1.45; white-space: nowrap;
	opacity: 0; transform: translate(-50%, -100%) translateY(-6px);
	transition: opacity .12s ease;
}
.tip.on { opacity: 1; }
.tip b { display: block; font-size: 13px; margin-bottom: 2px; }
.tip .muted { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
/* A small notch, so the tooltip visibly belongs to the square under it. */
.tip::after {
	content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
	transform: translateX(-50%) rotate(45deg);
	background: #14161c; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}

/* Streak flame ----------------------------------------------------------------------------
   Only shown when there is a streak to celebrate. Two layers flickering out of phase, which
   reads as fire far more cheaply than a sprite sheet or a video would. */
.streak-row { display: flex; align-items: center; gap: 9px; }
.flame { width: 22px; height: 26px; flex: none; position: relative; }
.flame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flame .outer { fill: #c9772a; animation: flicker 1.5s ease-in-out infinite; transform-origin: 50% 90%; }
.flame .inner { fill: #e8b84b; animation: flicker 1.1s ease-in-out infinite reverse; transform-origin: 50% 90%; }
@keyframes flicker {
	0%, 100% { transform: scale(1) skewX(0deg); opacity: 1; }
	30% { transform: scale(1.06, .96) skewX(-2.5deg); opacity: .9; }
	60% { transform: scale(.95, 1.05) skewX(2deg); opacity: 1; }
}
/* Someone who asked for less motion still gets the flame, just still. */
@media (prefers-reduced-motion: reduce) {
	.flame .outer, .flame .inner { animation: none; }
}