/* ============================================================================
   ACTION-PAGE THEME — "test-kitchen worksheet" (warm matte-green)
   Everything is scoped under `.mkscope` and uses `mk-` component classes, so it
   NEVER collides with the base app styles. Static dashboards are untouched; wrap
   an interactive/builder/action page in <div class="mkscope"> to opt in.
   ========================================================================== */

.mkscope{
  /* palette */
  --mk-ground:#EEF3EC; --mk-paper:#FBFCF9; --mk-paper2:#F4F7F1;
  --mk-ink:#14201B; --mk-ink-soft:#42524A; --mk-ink-faint:#7A897F;
  --mk-line:#DCE6DA; --mk-line-soft:#E7EEE4;
  --mk-forest:#12604A; --mk-leaf:#26B180; --mk-leaf-deep:#1A9C76; --mk-lime:#9FD45B;
  /* semantic (separate from the brand accent) */
  --mk-cost:#B9791A; --mk-cost-bg:#F6EBD5;
  --mk-kcal:#D95C36; --mk-kcal-bg:#F8E4DB;
  --mk-sub:#5B7CC4;  --mk-sub-bg:#E5ECF8;
  --mk-flag:#C2452F; --mk-flag-bg:#F7E1DC;
  --mk-shadow:0 1px 2px rgba(20,40,30,.05),0 8px 26px rgba(20,60,45,.07);
  --mk-radius:16px;

  background:var(--mk-ground);
  color:var(--mk-ink);
  font-family:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---- typography ---- */
.mkscope h1,.mkscope h2,.mkscope h3,.mkscope .mk-display{
  font-family:"Fraunces",Georgia,serif; text-wrap:balance; margin:0; line-height:1.1; color:var(--mk-ink);
}
.mkscope h1{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:-.02em}
.mkscope h2{font-size:clamp(22px,3vw,32px);font-weight:600}
.mkscope h3{font-size:19px;font-weight:600}
.mk-eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-leaf-deep)}
.mk-lede{color:var(--mk-ink-soft);max-width:62ch}
.mk-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.mk-muted{color:var(--mk-ink-faint)}

/* ---- surfaces ---- */
.mk-card{background:var(--mk-paper);border:1px solid var(--mk-line);border-radius:var(--mk-radius);box-shadow:var(--mk-shadow)}
.mk-pad{padding:22px}
.mk-card-2{background:var(--mk-paper2);border:1px solid var(--mk-line);border-radius:var(--mk-radius)}

/* ---- buttons ---- */
.mk-btn{display:inline-flex;align-items:center;gap:7px;border-radius:9px;padding:8px 14px;font-size:13px;
  font-weight:600;border:1px solid var(--mk-line);background:var(--mk-paper);color:var(--mk-ink);
  cursor:pointer;font-family:inherit;transition:border-color .14s,background .14s,transform .05s}
.mk-btn:hover{border-color:var(--mk-leaf)}
.mk-btn:active{transform:translateY(1px)}
.mk-btn.primary{background:linear-gradient(135deg,var(--mk-leaf),var(--mk-leaf-deep));color:#fff;border-color:transparent}
.mk-btn.primary:hover{filter:brightness(1.04)}
.mk-btn:focus-visible{outline:2px solid var(--mk-forest);outline-offset:2px}
.mk-btn .mk-ic{width:15px;height:15px}

/* ---- inputs ---- */
.mkscope input,.mkscope select,.mkscope textarea,.mk-input{
  font-family:inherit;font-size:14px;color:var(--mk-ink);background:var(--mk-paper);
  border:1px solid var(--mk-line);border-radius:9px;padding:9px 11px}
.mkscope input:focus,.mkscope select:focus,.mkscope textarea:focus,.mk-input:focus{
  outline:2px solid var(--mk-leaf);outline-offset:1px;border-color:var(--mk-leaf)}
.mk-search{display:flex;align-items:center;gap:8px;border:1px solid var(--mk-line);border-radius:9px;
  padding:8px 10px;color:var(--mk-ink-faint);font-size:13px;background:var(--mk-paper)}

/* ---- icons (always sized, currentColor) ---- */
.mk-ic{width:18px;height:18px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* ---- tabs (soft sub-nav) ---- */
.mk-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 16px}
.mk-tab{padding:7px 14px;border:1px solid var(--mk-line);background:var(--mk-paper);color:var(--mk-ink-soft);
  border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.mk-tab:hover{border-color:transparent;background:var(--mk-leaf);color:#fff}
.mk-tab.on{background:linear-gradient(135deg,var(--mk-leaf),var(--mk-leaf-deep));color:#fff;
  border-color:transparent;box-shadow:0 4px 12px rgba(38,177,128,.27)}

/* ---- chips & badges ---- */
.mk-chip{display:inline-flex;align-items:center;gap:7px;border-radius:100px;padding:6px 13px;font-size:12.5px;
  font-weight:600;border:1px solid var(--mk-leaf);color:var(--mk-leaf-deep);background:var(--mk-paper)}
.mk-chip.warn{border-color:var(--mk-flag);color:var(--mk-flag);background:var(--mk-flag-bg)}
.mk-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;
  padding:3px 9px;border-radius:100px;background:var(--mk-paper2);color:var(--mk-ink-soft);border:1px solid var(--mk-line)}
.mk-badge.on{color:var(--mk-leaf-deep);border-color:var(--mk-leaf)}

/* ---- tables ---- */
.mk-table{width:100%;border-collapse:collapse;font-size:13.5px}
.mk-table th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-ink-faint);
  font-weight:700;padding:0 10px 9px;border-bottom:1px solid var(--mk-line)}
.mk-table th.num,.mk-table td.num{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.mk-table td{padding:11px 10px;border-bottom:1px solid var(--mk-line-soft);vertical-align:middle}
.mk-table tr:last-child td{border-bottom:0}
.mk-table-wrap{overflow-x:auto}

/* ---- semantic number colours ---- */
.mk-cost{color:var(--mk-cost)} .mk-kcal{color:var(--mk-kcal)}
.mk-sub{color:var(--mk-sub)}   .mk-pos{color:var(--mk-leaf-deep);font-weight:600}

/* ---- the "docket" (live counter panel) ---- */
.mk-docket{background:var(--mk-paper);border:1px solid var(--mk-line);border-radius:14px;padding:16px}
.mk-docket .mk-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-ink-faint);
  display:flex;align-items:center;gap:7px;margin-bottom:10px}
.mk-bignum{font-family:"IBM Plex Mono",monospace;font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1}
.mk-bignum small{font-size:14px;color:var(--mk-ink-faint);font-weight:500}

/* ---- dependency / info note ---- */
.mk-note{font-size:11.5px;color:var(--mk-ink-soft);background:var(--mk-cost-bg);border-radius:9px;
  padding:11px 12px;display:flex;gap:9px;line-height:1.45}
.mk-note.kcal{background:var(--mk-kcal-bg);color:var(--mk-kcal)}
.mk-note .mk-ic{width:15px;height:15px;flex:none;margin-top:1px}

/* ---- layout helpers ---- */
.mk-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mk-grid{display:grid;gap:16px}
.mk-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

@media(prefers-reduced-motion:reduce){.mkscope *{transition:none!important}}

/* ---- Meal Maker interactive builder ---- */
.mkscope .mm-shell{max-width:1180px;margin:0 auto;padding:22px 24px}
.mkscope .mm-build{display:grid;grid-template-columns:236px 1fr 288px;gap:16px;align-items:start}
@media(max-width:960px){.mkscope .mm-build{grid-template-columns:1fr}}
.mkscope .mm-col{background:var(--mk-paper);border:1px solid var(--mk-line);border-radius:var(--mk-radius);box-shadow:var(--mk-shadow)}
.mkscope .mm-col.pal,.mkscope .mm-col.rail{background:var(--mk-paper2)}
.mkscope .mm-colpad{padding:16px}
.mkscope .mm-h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-ink-faint);margin:0 0 12px;display:flex;align-items:center;gap:7px}
.mkscope .mm-pill{display:flex;align-items:center;gap:8px;border:1px solid var(--mk-line);border-radius:9px;padding:8px 10px;background:var(--mk-paper);font-size:13px;cursor:pointer;margin-bottom:6px;transition:border-color .12s,transform .05s}
.mkscope .mm-pill:hover{border-color:var(--mk-leaf)}
.mkscope .mm-pill:active{transform:translateY(1px)}
.mkscope .mm-pill .u{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--mk-ink-faint)}
.mkscope .mm-pill.sub{border-style:dashed;border-color:var(--mk-sub);color:var(--mk-sub)}
.mkscope .mm-palist{max-height:560px;overflow-y:auto;padding-right:4px}
.mkscope .mm-dishname{font-family:"Fraunces",serif;font-size:26px;font-weight:600;border:0;border-bottom:2px dashed var(--mk-line);padding:2px 0 8px;width:100%;background:transparent;color:var(--mk-ink)}
.mkscope .mm-dishname:focus{outline:none;border-bottom-color:var(--mk-leaf)}
.mkscope .mm-dmeta{display:flex;gap:16px;align-items:center;color:var(--mk-ink-faint);font-size:12.5px;margin:12px 0 16px}
.mkscope .mm-serves{width:56px;text-align:center;font-family:"IBM Plex Mono",monospace}
.mkscope table.mm-bom{width:100%;border-collapse:collapse;font-size:13.5px}
.mkscope table.mm-bom th{text-align:left;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-ink-faint);font-weight:700;padding:0 8px 8px;border-bottom:1px solid var(--mk-line)}
.mkscope table.mm-bom th.num,.mkscope table.mm-bom td.num{text-align:right}
.mkscope table.mm-bom td{padding:9px 8px;border-bottom:1px solid var(--mk-line-soft);vertical-align:middle}
.mkscope .mm-qty{width:72px;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:12.5px;padding:5px 8px;border:1px solid var(--mk-line);border-radius:7px;background:var(--mk-paper)}
.mkscope .mm-line-cost{font-family:"IBM Plex Mono",monospace;color:var(--mk-cost)}
.mkscope .mm-rm{color:var(--mk-flag);cursor:pointer;font-weight:700;border:0;background:none;font-size:15px;line-height:1}
.mkscope .mm-empty{border:1px dashed var(--mk-line);border-radius:10px;padding:22px;text-align:center;color:var(--mk-ink-faint);font-size:13px}
.mkscope .mm-docket{padding:16px;border-bottom:1px solid var(--mk-line)}
.mkscope .mm-docket:last-child{border-bottom:0}
.mkscope .mm-cost{font-family:"IBM Plex Mono",monospace;font-size:34px;font-weight:600;color:var(--mk-cost);letter-spacing:-.02em;line-height:1}
.mkscope .mm-cost small{font-size:14px;color:var(--mk-ink-faint);font-weight:500}
.mkscope .mm-break{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--mk-ink-soft)}
.mkscope .mm-break div{display:flex;justify-content:space-between}
.mkscope .mm-break .mono{font-family:"IBM Plex Mono",monospace;color:var(--mk-ink)}
.mkscope .mm-ring{width:80px;height:80px}

/* ---- Meal Maker END-TO-END layout (override — full width, no wasted space, mock-aligned) ---- */
.mkscope .mm-shell{max-width:1560px;margin:0 auto;padding:14px 22px 26px}
.mm-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.mm-topbar .mk-eyebrow{font-size:13px}
.mm-builder{border:1px solid var(--mk-line);border-radius:18px;overflow:hidden;box-shadow:var(--mk-shadow);background:var(--mk-paper)}
.mm-toolbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--mk-line);background:var(--mk-paper2)}
.mm-dot{width:10px;height:10px;border-radius:50%;background:var(--mk-line);flex:none}
.mm-toolbar-t{font-family:"Fraunces",serif;font-weight:600;font-size:15px;margin-left:6px}
/* full-bleed 3-column builder that fills the screen height */
.mkscope .mm-build{grid-template-columns:270px 1fr 320px;gap:0;align-items:stretch}
.mkscope .mm-col{border:0;border-radius:0;box-shadow:none;min-height:calc(100vh - 220px)}
.mkscope .mm-col.pal{border-right:1px solid var(--mk-line)}
.mkscope .mm-col.rail{border-left:1px solid var(--mk-line)}
@media(max-width:960px){.mkscope .mm-build{grid-template-columns:1fr}.mkscope .mm-col{min-height:0;border:0;border-top:1px solid var(--mk-line)}}
.mkscope .mm-palist{max-height:calc(100vh - 320px)}
.mkscope .mm-colpad{padding:18px 20px}
/* richer docket rail */
.mkscope .mm-rail-cost{font-family:"IBM Plex Mono",monospace;font-size:40px;font-weight:600;color:var(--mk-cost);letter-spacing:-.02em;line-height:1}
.mkscope .mm-rail-cost small{font-size:15px;color:var(--mk-ink-faint);font-weight:500}