/* Only what the Luxdone kit lacks: charts and the demonstration panel. Colors come from kit tokens. */
.mk-chart { width: 100%; height: auto; display: block; overflow: visible; }
.mk-chart text { fill: var(--muted-foreground); font-size: 11px; font-variant-numeric: tabular-nums; }
.mk-chart .grid { stroke: var(--border); stroke-width: 1; }
.mk-chart .band { fill: var(--chart-1); opacity: 0.16; }
.mk-chart .line { fill: none; stroke: var(--chart-1); stroke-width: 2; }
.mk-chart .line.sent { stroke: var(--muted-foreground); stroke-dasharray: 4 3; stroke-width: 1.5; }
.mk-chart .line.actual { stroke: var(--chart-3); }
.mk-chart .cap { stroke: var(--destructive); stroke-dasharray: 2 3; stroke-width: 1.5; }
.mk-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.75rem; color: var(--muted-foreground); }
.mk-legend i { display: inline-block; width: 1rem; height: 0; border-top: 2px solid var(--chart-1); vertical-align: middle; margin-inline-end: 0.375rem; }
.mk-legend i.sent { border-top: 2px dashed var(--muted-foreground); }
.mk-legend i.actual { border-top-color: var(--chart-3); }
.mk-legend i.band { border-top: 8px solid color-mix(in oklab, var(--chart-1) 16%, transparent); }
.mk-legend i.cap { border-top: 2px dotted var(--destructive); }
.mk-days { display: grid; grid-template-columns: repeat(9, minmax(4.25rem, 1fr)); gap: 0.375rem; overflow-x: auto; }
.mk-day { display: grid; gap: 0.25rem; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); text-align: left; cursor: pointer; font: inherit; color: inherit; }
.mk-day[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.mk-day:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mk-day .bar { height: 3rem; display: flex; align-items: flex-end; }
.mk-day .bar span { display: block; width: 100%; background: var(--chart-1); border-radius: 2px 2px 0 0; }
.mk-day .bar span.corrected { background: var(--chart-3); }
.mk-num { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.mk-kpi { display: grid; gap: 0.25rem; padding: 0.75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); }
.mk-steps { counter-reset: step; display: grid; gap: 0.75rem; }
.mk-steps li { counter-increment: step; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.5rem; align-items: start; }
.mk-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: 1px solid var(--border); font-size: 0.75rem; font-weight: 600; }
.mk-steps li[data-done="true"]::before { content: "✓"; background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.mk-range { width: 100%; accent-color: var(--primary); }
.mk-demo { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: 40; width: min(20rem, calc(100vw - 2rem)); background: var(--background); border: 1px dashed var(--muted-foreground); border-radius: var(--radius); box-shadow: 0 4px 16px rgb(0 0 0 / 0.12); font-size: 0.8125rem; }
.mk-demo summary { cursor: pointer; padding: 0.5rem 0.75rem; font-weight: 600; }
.mk-demo .body { display: grid; gap: 0.625rem; padding: 0 0.75rem 0.75rem; }
.mk-hours { max-height: 26rem; overflow: auto; }
@media print { .mk-demo { display: none; } }
/* Phone navigation: the kit's static markup has no sheet behavior, so the mockup opens the sidebar over the page. */
@media (max-width: 59.99rem) {
  [data-slot="sidebar"].mk-open { display: block !important; width: 0; }
  [data-slot="sidebar"].mk-open [data-slot="sidebar-gap"] { display: none; }
  [data-slot="sidebar"].mk-open [data-slot="sidebar-container"] { display: flex !important; z-index: 50; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.3); }
}
/* Chain of steps: where each number comes from. */
.mk-chain ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.mk-chain li { position: relative; }
.mk-chain li:not(:last-child)::after { content: "→"; position: absolute; inset-inline-end: -1rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
.mk-chain a { display: grid; gap: 0.25rem; height: 100%; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; align-content: start; }
.mk-chain a:hover { background: var(--muted); }
.mk-chain a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.mk-chain li[aria-current="step"] a { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
@media (max-width: 47.99rem) {
  /* On a phone the chain is a swipeable strip, so the step's own content stays on the first screen. */
  .mk-chain ol { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 11.5rem; overflow-x: auto; padding-bottom: 0.25rem; scroll-snap-type: x proximity; }
  .mk-chain li { scroll-snap-align: start; }
  .mk-days { grid-template-columns: repeat(9, 5.75rem); }
}
.mk-kpi[data-tone="success"] { border-color: color-mix(in oklab, var(--success) 45%, var(--border)); }
.mk-kpi[data-tone="info"] { border-color: var(--primary); }
.mk-kpi[data-tone="destructive"] { border-color: color-mix(in oklab, var(--destructive) 55%, var(--border)); }
.mk-flow .mk-kpi:not(:last-child) { position: relative; }
.mk-chart .line.ghost { stroke: var(--muted-foreground); stroke-width: 1; opacity: 0.6; }
.mk-chart .line.profile { stroke: var(--chart-4); stroke-dasharray: 2 3; stroke-width: 1.5; }
.mk-chart .bar.ours { fill: var(--chart-1); }
.mk-chart .bar.profile { fill: var(--chart-4); opacity: 0.55; }
.mk-chart .mark { fill: var(--destructive); font-size: 10px; }
.mk-legend i.ghost { border-top: 1px solid var(--muted-foreground); }
.mk-legend i.profile { border-top: 2px dotted var(--chart-4); }
.mk-legend i.ours { border-top: 8px solid var(--chart-1); }
.mk-day .bar { position: relative; }
.mk-day .bar span.ghost { position: absolute; inset-inline: 0; bottom: 0; background: transparent; border: 1px dashed var(--muted-foreground); border-bottom: 0; }
.mk-day .bar span:not(.ghost) { position: relative; }
.mk-legend i.profilebar { border-top: 8px solid color-mix(in oklab, var(--chart-4) 55%, transparent); }
/* To-do rows: tag, sentence, one action. */
.mk-todo { display: grid; border: 1px solid var(--border); border-radius: var(--radius); }
.mk-todo li { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.625rem 0.75rem; }
.mk-todo li + li { border-top: 1px solid var(--border); }
@media (max-width: 47.99rem) { .mk-todo li { grid-template-columns: 1fr; gap: 0.375rem; } .mk-todo li > :last-child { justify-self: start; } }
/* Forecast breakdown reads as a calculation. */
.mk-flow { gap: 1.5rem; }
.mk-flow .mk-kpi { position: relative; }
.mk-flow .mk-kpi:not(:last-child)::after { content: "→"; position: absolute; inset-inline-end: -1.2rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); }
@media (max-width: 47.99rem) { .mk-flow .mk-kpi:not(:last-child)::after { content: "↓"; inset-inline-end: auto; inset-inline-start: 1rem; top: auto; bottom: -1.35rem; transform: none; } }
.mk-day .badge, .mk-day [data-slot="badge"] { justify-self: start; }
.mk-cost { display: grid; grid-template-columns: minmax(12rem, 16rem) repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 59.99rem) { .mk-cost { grid-template-columns: 1fr; } }
[data-slot="page-content"] > *, [data-slot="page-content"] section > * { min-width: 0; }
.mk-chart .bar.past { fill: var(--chart-2); opacity: 0.7; }
.mk-legend i.pastbar { border-top: 8px solid color-mix(in oklab, var(--chart-2) 70%, transparent); }