/* ==========================================================================
   /mise/mise.css  --  Mise: one meal, one timeline

   Every rule is scoped to #mise (the page body) or #mise-cook (the full-screen
   cooking overlay). Nothing here is a bare element or bare class selector,
   because this file loads alongside css/default.css, navbar.css and mobile.css
   on a page that also renders the site navbar and footer. The only name that
   collides with the sitewide sheets is .btn, and "#mise .btn" outranks it.

   The palette tokens below are the same values default.css already uses
   (--color0/1/3/8); they are redeclared locally under #mise only so the rules
   below read the way the mockup did.

   Root font-size is 10px sitewide (default.css), so 1rem = 10px here.
   ========================================================================== */

#mise, #mise-cook {
	--tan: rgb(252 221 151);
	--ink: rgb(58 26 27);
	--ink-lt: rgba(58,26,27,.3);
	--ink-xlt: rgba(58,26,27,.12);
	--purple: rgb(199 164 212);
	--blue: rgb(173 230 248);
	--white: #fff;
	--red: #F44336;
	--green: #4CAF50;
	--steel: #4781af;
	--panel: rgb(58 26 27);
	--panel-text: rgb(252 221 151);
	--panel-muted: rgba(252,221,151,.7);
}

/* ==========================================================================
   THE ONE RULE THAT MATTERS MOST

   default.css sets `html, body, #page-container { text-align: center; }` for
   the whole site, and text-align inherits. Every page on Robot Recipes is a
   centred column, so nothing ever had to opt out -- but Mise is a left-aligned
   application layout, and without this reset EVERY line of it renders centred:
   the h1, the lede, the section labels, the hints, the shopping list rows, the
   order-of-operations table cells, the timeline axis, the disclaimer. That one
   inherited word is the difference between "a tool" and "looks terrible".

   Anything here that genuinely wants centring says so itself (.stepper .n,
   .step .tag, the print sheet's masthead).
   ========================================================================== */
#mise, #mise-cook, #mise-print-sheet { text-align: left; }

#mise {
	max-width: 1000px;
	margin: 0 auto;
	padding: 26px 22px 60px;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.43;
}
#mise *, #mise-cook * { box-sizing: border-box; }

/* Sitewide leaks that would otherwise show up inside the app: default.css
   sizes h2 in `em` (1.6em of a 14px parent) and pads every `ul li`. */
#mise h2, #mise h3 { font-size: inherit; font-weight: inherit; margin: 0; }
#mise ul li, #mise ol li { margin-bottom: 0; }

/* The printed sheet is built into the page but never shown on screen.
   mise-print.css (media="print") is what reveals it. */
#mise-print-sheet { display: none; }

/* default.css sets `div { position: relative; overflow: hidden; }` for the whole
   site. That single rule clips anything that has to escape its own box, so the
   three places here that do have to escape say so explicitly:
     .searchbox  the autocomplete dropdown hangs below a 54px-tall box, and
                 without this it is invisible -- the feature looks broken.
     .track/.lane the "now" line is drawn 5px proud of the bar top and bottom.
   Do not remove these without re-testing the dropdown. */
#mise .builder { overflow: visible; }
#mise .searchbox { overflow: visible; }
/* the starter cards lift and cast a shadow on hover, which a clipping
   ancestor would slice off */
#mise .menu { overflow: visible; }
#mise .scards { overflow: visible; }
#mise .track { overflow: visible; }
#mise .lane { overflow: visible; }
#mise .gantt { overflow: visible; }
#mise a { color: var(--ink); text-decoration: none; }
/* Links sitting inside running text have to look like links -- the sitewide
   `a { text-decoration: none }` makes them invisible otherwise. Links that are
   already buttons, chips or cards opt back out below. */
#mise .hint a, #mise .card .sub a, #mise .disc a, #mise .lede a {
	text-decoration: underline; text-underline-offset: 2px; font-weight: 600;
}
#mise .hint a:hover, #mise .card .sub a:hover, #mise .lede a:hover { text-decoration-style: dotted; }
#mise .scards a, #mise .results a { text-decoration: none; }
#mise button { font-family: inherit; color: inherit; cursor: pointer; }
#mise input { font-family: inherit; color: inherit; }
#mise :focus-visible, #mise-cook :focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }

/* ---------- hero ---------- */
#mise .hero { padding: 4px 0 24px; }
#mise .hero .eyebrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#mise .hero .mark { display: flex; align-items: center; gap: 8px; font-size: 1.3rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }
#mise .hero h1 { font-size: 4.2rem; font-weight: 800; line-height: 1.02; letter-spacing: -.015em; margin: 14px 0 0; }
#mise .hero .lede { font-size: 1.7rem; line-height: 1.5; margin: 10px 0 0; max-width: 58ch; }
#mise .hero .lede .ab { white-space: nowrap; font-weight: 700; color: var(--steel); text-decoration: underline; text-underline-offset: 2px; }
#mise .hero .lede .ab:hover { text-decoration-style: dotted; }
#mise .clock { display: inline-flex; align-items: center; gap: 7px; background: var(--white); border-radius: 20px; height: 36px; padding: 0 14px; font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- builder ---------- */
#mise .builder { background: var(--white); border-radius: 14px; padding: 22px; border: 1px solid var(--ink-xlt); }
#mise .label { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .65; margin-bottom: 8px; }
#mise .searchbox { position: relative; }
#mise .searchbox input { display: block; width: 100%; height: 54px; padding: 12px 96px 12px 18px; border: 1px solid var(--ink-lt); border-radius: 2px; background: rgba(0,0,0,.04); font-size: 17px; font-weight: 500; outline: 0; }
#mise .searchbox input:focus { border-color: var(--purple); background: var(--white); }
#mise .searchbox .ico { position: absolute; right: 18px; top: 17px; width: 20px; height: 20px; pointer-events: none; }
#mise .searchbox .clear { position: absolute; right: 46px; top: 9px; height: 36px; padding: 0 10px; border: 0; background: transparent; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--steel); display: none; }
#mise .searchbox.has .clear { display: block; }
#mise .results { position: absolute; left: 0; right: 0; top: 54px; z-index: 50; background: var(--white); border: 1px solid var(--purple); border-top: 0; box-shadow: 0 12px 24px rgba(58,26,27,.12); display: none; }
#mise .results.showing { display: block; }
#mise .results a { display: block; padding: 0 20px; line-height: 46px; font-size: 17px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mise .results a:hover, #mise .results a.hi { background: var(--tan); padding-left: 25px; }
#mise .results .gen { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 12px 20px; border-top: 1px dashed var(--ink-lt); font-size: 13px; }
#mise .results .gen b { display: inline-flex; align-items: center; height: 40px; padding: 0 15px; background: var(--blue); border-radius: 3px; font-weight: 700; text-transform: uppercase; font-size: 13px; }
#mise .results .none { padding: 12px 20px; font-size: 14px; opacity: .7; }

#mise .menu { margin-top: 22px; }

/* ---------- starter cards ----------
   Was a row of dashed text pills carrying the full SEO title
   ("Traditional Czech Klobasa: A Homemade Sausage Recipe" x8), which wrapped
   into an unreadable grey block. These are the recipe's own photograph with
   the dish name under it -- the same currency the rest of the site trades in.
   They are real <a> elements: crawlable, middle-clickable, and intercepted. */
#mise .scards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
#mise .scards .scard {
	display: block; position: relative; overflow: hidden;
	border: 1px solid var(--ink-xlt); border-radius: 12px; background: var(--white);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
#mise .scards .scard:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(58,26,27,.14); }
#mise .scards .pic {
	display: block; width: 100%; padding-top: 72%;
	background-size: cover; background-position: center; background-repeat: no-repeat;
	background-color: rgba(58,26,27,.07);
}
#mise .scards .pic.none {
	background-image: url('https://robotrecipes.co/images/missing.svg');
	background-size: 44px auto; background-position: center;
}
#mise .scards .nm {
	display: block; padding: 10px 12px 12px; font-size: 1.45rem; font-weight: 700;
	line-height: 1.25; color: var(--ink);
}
/* Full-card overlay, so the affordance is unmistakable without adding a button
   that would compete with the search box above it. */
#mise .scards .go {
	position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px;
	background: linear-gradient(to top, rgba(58,26,27,.92) 0%, rgba(58,26,27,.72) 45%, rgba(58,26,27,0) 100%);
	color: var(--tan); font-size: 1.3rem; font-weight: 700; line-height: 1.25;
	opacity: 0; transition: opacity .18s ease;
}
#mise .scards .scard:hover .go, #mise .scards .scard:focus-visible .go { opacity: 1; }

#mise .chips { display: flex; flex-wrap: wrap; gap: 9px; }
#mise .chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 6px 0 14px; border: 1.5px solid var(--ink-lt); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 600; }
#mise .chip .sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
#mise .chip .nm { display: inline-flex; align-items: center; gap: 8px; line-height: 1.2; }
#mise .chip small { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .6; white-space: nowrap; }
#mise .chip small a, #mise .chip small button { color: var(--steel); opacity: 1; background: none; border: 0; padding: 0; font: inherit; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
#mise .chip small a:hover, #mise .chip small button:hover { text-decoration: underline; }
#mise .chip.main { border-color: var(--ink); background: var(--tan); }
#mise .chip .x { width: 36px; height: 36px; border: 0; background: transparent; border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto; }
#mise .chip .x:hover { background: rgba(58,26,27,.1); }
#mise .chip .x svg { width: 16px; height: 16px; }
#mise .chip.add { border-style: dashed; background: transparent; padding: 0 16px; font-weight: 700; }
#mise .chip.add:hover { border-color: var(--ink); }
#mise .chip.add[disabled] { opacity: .5; cursor: default; }
#mise .addrow { display: none; gap: 8px; margin-top: 10px; max-width: 460px; }
#mise .addrow.showing { display: flex; }
#mise .addrow input { flex: 1; min-width: 0; height: 46px; padding: 8px 14px; border: 1px solid var(--ink-lt); border-radius: 2px; background: rgba(0,0,0,.04); font-size: 15px; outline: 0; }
#mise .addrow input:focus { border-color: var(--purple); background: var(--white); }

#mise .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 1px solid transparent; border-radius: 3px; font-size: 13px; font-weight: 700; white-space: nowrap; background: var(--blue); color: var(--ink); text-transform: none; }
#mise .btn:hover { background: var(--purple); }
#mise .btn.outline { background: transparent; border-color: var(--ink); color: var(--ink); }
#mise .btn.outline:hover { background: var(--ink); color: var(--white); }
#mise .btn.lg { height: 56px; padding: 0 30px; font-size: 15px; }
#mise .btn[disabled] { opacity: .55; cursor: default; }
#mise .status { font-size: 13px; margin: 12px 0 0; opacity: .8; min-height: 18px; }
#mise .status.busy { color: var(--steel); }
#mise .status.err { color: #a8402f; opacity: 1; }

/* ==========================================================================
   PROGRESS
   The "start" request is several seconds of real work: reading a recipe,
   timing every step, choosing the rest of the menu. Nothing about that is
   instant and nothing about it should look frozen, so it is narrated.
   ========================================================================== */
#mise .working {
	margin-top: 22px; padding: 16px 18px 14px;
	border: 1px solid var(--ink-xlt); border-radius: 14px;
	background: linear-gradient(180deg, rgba(173,230,248,.30), rgba(173,230,248,.10));
}
#mise .working .wtop { display: flex; align-items: center; gap: 12px; }
#mise .working .wtx { flex: 1; min-width: 0; }
#mise .working .wtx b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
#mise .working .wtx i { display: block; font-style: normal; font-size: 1.35rem; opacity: .75; margin-top: 2px; }
#mise .working .wpct { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .6; }
#mise .working .spin {
	width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%;
	border: 3px solid rgba(58,26,27,.18); border-top-color: var(--ink);
	animation: mise-spin .9s linear infinite;
}
@keyframes mise-spin { to { transform: rotate(360deg); } }

#mise .working .wbar { height: 8px; border-radius: 4px; background: rgba(58,26,27,.12); margin-top: 12px; overflow: hidden; }
#mise .working .wbar i {
	display: block; height: 100%; width: 0; border-radius: 4px;
	background: linear-gradient(90deg, var(--purple), var(--steel));
	transition: width .5s cubic-bezier(.25,.8,.25,1);
}

#mise .working .wsteps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
#mise .working .wsteps li {
	display: flex; align-items: center; gap: 8px;
	font-size: 1.3rem; font-weight: 600; opacity: .4; margin: 0;
	transition: opacity .25s ease;
}
#mise .working .wsteps li .dot {
	width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
	border: 2px solid rgba(58,26,27,.35); display: flex; align-items: center; justify-content: center;
}
#mise .working .wsteps li .dot svg { width: 10px; height: 10px; display: none; }
#mise .working .wsteps li.on { opacity: 1; }
#mise .working .wsteps li.on .dot { border-color: var(--steel); box-shadow: 0 0 0 4px rgba(71,129,175,.16); animation: mise-pulse 1.4s ease-in-out infinite; }
#mise .working .wsteps li.ok { opacity: .85; }
#mise .working .wsteps li.ok .dot { background: var(--green); border-color: var(--green); animation: none; box-shadow: none; }
#mise .working .wsteps li.ok .dot svg { display: block; }
@keyframes mise-pulse { 50% { box-shadow: 0 0 0 8px rgba(71,129,175,.05); } }

/* ---------- skeletons ---------- */
@keyframes mise-shimmer { to { background-position: 200% 0; } }
#mise .sk,
#mise .skel .sline,
#mise .skel .strack i,
#mise .chip.skel .bar {
	background: linear-gradient(90deg, rgba(58,26,27,.09) 0%, rgba(58,26,27,.17) 50%, rgba(58,26,27,.09) 100%);
	background-size: 200% 100%;
	animation: mise-shimmer 1.3s linear infinite;
	border-radius: 6px;
}
#mise .chip.skel { border-style: dashed; border-color: var(--ink-xlt); background: transparent; padding: 0 14px; min-width: 200px; }
#mise .chip.skel .col { display: flex; flex-direction: column; }
#mise .chip.skel .bar { display: block; height: 11px; border-radius: 5px; width: 130px; }
#mise .chip.skel .bar.s { height: 8px; width: 78px; margin-top: 6px; }

#mise .skel { margin-top: 22px; padding: 20px 18px; border: 1px solid var(--ink-xlt); border-radius: 20px; background: var(--white); }
#mise .skel .sline { display: block; height: 13px; margin-bottom: 16px; }
#mise .skel .sline.w40 { width: 40%; }
#mise .skel .sline.w30 { width: 30%; }
#mise .skel .sline.w28 { width: 28%; }
#mise .skel .sline.w25 { width: 25%; }
#mise .skel .sline.w20 { width: 20%; }
#mise .skel .sgantt { background: rgba(58,26,27,.04); border-radius: 14px; padding: 16px 14px; }
#mise .skel .slane { margin-bottom: 14px; }
#mise .skel .slane:last-child { margin-bottom: 0; }
#mise .skel .slane .sline { height: 9px; margin-bottom: 7px; }
#mise .skel .strack { display: block; position: relative; height: 30px; border-radius: 7px; background: rgba(58,26,27,.06); }
#mise .skel .strack i { position: absolute; top: 5px; height: 20px; border-radius: 5px; }

/* Shimmer and spin are decoration, not information -- the percentage, the
   stage labels and the tick marks carry all of it. */
@media (prefers-reduced-motion: reduce) {
	#mise .sk, #mise .skel .sline, #mise .skel .strack i, #mise .chip.skel .bar,
	#mise .working .spin, #mise .working .wsteps li.on .dot { animation: none; }
	#mise .working .wbar i { transition: none; }
}

#mise .controls { display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--ink-lt); }
#mise .stepper { display: flex; align-items: center; gap: 6px; }
#mise .stepper button { width: 46px; height: 46px; border: 1px solid var(--ink); border-radius: 3px; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; }
#mise .stepper button:hover { background: var(--ink); color: var(--white); }
#mise .stepper button svg { width: 18px; height: 18px; }
#mise .stepper .n { min-width: 52px; text-align: center; font-size: 2.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#mise .hint { font-size: 12px; opacity: .7; margin-top: 6px; }
#mise .times { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#mise .tchip { height: 46px; padding: 0 16px; border: 1.5px solid var(--ink-lt); border-radius: 999px; background: var(--white); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
#mise .tchip.on { background: var(--blue); border-color: var(--blue); }
#mise .tchip:hover { border-color: var(--ink); }
#mise .times input[type=time] { height: 46px; border: 1.5px solid var(--blue); border-radius: 999px; padding: 0 14px; background: var(--white); font-size: 14px; font-weight: 700; outline: 0; }

/* ---------- the plan ---------- */
#mise .plan { margin-top: 22px; background: var(--panel); color: var(--panel-text); border-radius: 20px; padding: 24px 22px 26px; }
#mise .plan .label { color: var(--purple); opacity: 1; }
#mise .startline { font-size: 2rem; font-weight: 700; line-height: 1.3; margin: 0; }
#mise .startline b { color: var(--blue); }
#mise .startline .sub { display: block; font-size: 1.4rem; font-weight: 500; color: var(--panel-muted); margin-top: 4px; }
#mise .startline.late b { color: #ffb4a8; }
#mise .gantt { margin-top: 18px; background: rgba(255,255,255,.05); border-radius: 14px; padding: 16px 14px; }
#mise .lane { margin: 0 0 14px; }
#mise .lane:last-of-type { margin-bottom: 0; }
#mise .lname { font-size: 1.25rem; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
#mise .lname .sw { width: 11px; height: 11px; border-radius: 3px; }
#mise .track { position: relative; height: 30px; background: rgba(255,255,255,.08); border-radius: 7px; }
#mise .blk { position: absolute; top: 0; height: 100%; border-radius: 6px; overflow: hidden; display: flex; align-items: center; padding: 0 7px; transition: left .45s cubic-bezier(.2,.8,.2,1), width .45s cubic-bezier(.2,.8,.2,1); }
#mise .blk span { font-size: 1.1rem; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
#mise .nowline { position: absolute; top: -5px; bottom: -5px; width: 0; border-left: 2px dashed var(--blue); pointer-events: none; }
#mise .axis { display: flex; justify-content: space-between; font-size: 1.2rem; color: var(--panel-muted); margin-top: 8px; font-variant-numeric: tabular-nums; }
#mise .legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 1.25rem; color: var(--panel-muted); margin-top: 14px; }
#mise .legend span { display: inline-flex; align-items: center; gap: 7px; }
#mise .legend i { width: 20px; height: 12px; border-radius: 3px; background: var(--blue); }
#mise .legend i.p { background: repeating-linear-gradient(45deg, rgba(173,230,248,.55) 0 4px, rgba(173,230,248,.2) 4px 8px); }
#mise .notice { margin-top: 16px; border-radius: 12px; padding: 13px 16px; font-size: 1.4rem; line-height: 1.45; border: 1.5px solid; }
#mise .notice.ok { background: rgba(76,175,80,.14); border-color: var(--green); }
#mise .notice.ok b { color: #9ADBA7; }
#mise .notice.warn { background: rgba(244,67,54,.16); border-color: var(--red); }
#mise .notice.warn b { color: #ffb4a8; }
#mise .conductor { margin-top: 18px; background: var(--white); color: var(--ink); border-radius: 14px; padding: 4px 4px 6px; }
#mise .conductor .hd { padding: 12px 16px 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .65; border-bottom: 1px dashed var(--ink-lt); }
#mise .step { display: grid; grid-template-columns: 72px 10px 1fr auto; gap: 0 12px; align-items: center; padding: 10px 16px; border-bottom: 1px dashed var(--ink-lt); font-size: 1.45rem; }
#mise .step:last-child { border-bottom: 0; }
#mise .step .t { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
#mise .step .sw { width: 10px; height: 10px; border-radius: 3px; }
#mise .step .d { opacity: .6; }
#mise .step .tag { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .6; white-space: nowrap; text-align: right; }
#mise .step.serve { font-weight: 800; }
#mise .plan .cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
#mise .plan .cta .btn.outline { border-color: rgba(252,221,151,.6); color: var(--panel-text); }
#mise .plan .cta .btn.outline:hover { background: var(--panel-text); color: var(--ink); }
#mise .sharebox { flex-basis: 100%; display: none; gap: 8px; align-items: center; margin-top: 4px; }
#mise .sharebox.showing { display: flex; flex-wrap: wrap; }
#mise .sharebox input { flex: 1; min-width: 220px; height: 42px; padding: 0 12px; border: 1px solid rgba(252,221,151,.5); border-radius: 3px; background: rgba(255,255,255,.08); color: var(--panel-text); font-size: 13px; }
#mise .sharebox .note { font-size: 1.25rem; color: var(--panel-muted); }

/* ---------- shopping + tools ---------- */
#mise .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
#mise .card { background: var(--white); border-radius: 14px; padding: 20px 22px; border: 1px solid var(--ink-xlt); }
#mise .card h2 { font-size: 2rem; font-weight: 700; margin: 0; }
#mise .card .sub { font-size: 13px; opacity: .7; margin: 4px 0 12px; }
#mise .ings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 1.5rem; }
#mise .ings li { display: flex; gap: 10px; align-items: center; min-height: 38px; cursor: pointer; border-radius: 6px; padding: 0 6px; margin: 0 -6px; }
#mise .ings li:hover { background: rgba(58,26,27,.05); }
#mise .ings .box { width: 18px; height: 18px; border: 1.5px solid var(--ink-lt); border-radius: 4px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
#mise .ings .box svg { width: 12px; height: 12px; display: none; }
#mise .ings li.done .box { background: var(--green); border-color: var(--green); }
#mise .ings li.done .box svg { display: block; }
#mise .ings li.done .q, #mise .ings li.done .n { opacity: .45; text-decoration: line-through; }
#mise .ings .q { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 64px; }
#mise .ings a, #mise .tools a { text-decoration: underline; font-weight: 500; letter-spacing: .35px; }
#mise .ings a:hover, #mise .tools a:hover { text-decoration-style: dotted; }
#mise .tools { margin: 0; padding-left: 20px; font-size: 1.5rem; }
#mise .tools li { margin-bottom: 8px; }
#mise .tools .why { display: block; font-size: 12px; opacity: .7; }
#mise .disc { margin-top: 22px; font-size: 1.35rem; line-height: 1.25; color: rgba(0,0,0,.62); }
#mise .disc p { margin: 0 0 8px; }

/* the mobile-only serve summary button */
#mise #mise-servebar { display: none; }

/* ==========================================================================
   COOKING MODE  --  deliberately the dark inverted palette, on every viewport.
   It is a different mode, not a different page: high contrast reads across a
   kitchen, and the colour flip is the signal that you are now cooking.
   ========================================================================== */
#mise-cook { position: fixed; inset: 0; background: var(--panel); color: var(--panel-text); z-index: 10000; display: none; overflow: auto; -webkit-overflow-scrolling: touch; font-family: Muli, Helvetica, Arial, sans-serif; }
#mise-cook.showing { display: block; }
#mise-cook .in { max-width: 560px; margin: 0 auto; padding: 18px 20px 140px; }
#mise-cook .top { display: flex; align-items: center; justify-content: space-between; }
#mise-cook .top .t1 { font-weight: 800; font-size: 1.6rem; }
#mise-cook .top .t2 { font-size: 1.25rem; color: var(--panel-muted); }
#mise-cook .close { width: 44px; height: 44px; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; margin-right: -12px; color: inherit; cursor: pointer; }
#mise-cook .close svg { width: 22px; height: 22px; }
#mise-cook .big { display: flex; justify-content: space-between; align-items: baseline; margin-top: 18px; }
#mise-cook .big .now { font-size: 3.6rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#mise-cook .big .left { font-size: 1.4rem; font-weight: 700; }
#mise-cook .bar { position: relative; height: 8px; border-radius: 4px; background: rgba(252,221,151,.18); margin-top: 8px; overflow: hidden; }
#mise-cook .bar i { position: absolute; left: 0; top: 0; height: 100%; background: var(--purple); border-radius: 4px; }
#mise-cook .ax { display: flex; justify-content: space-between; font-size: 1.15rem; color: var(--panel-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }
#mise-cook .label { display: block; color: var(--purple); font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 24px 0 8px; }
#mise-cook .nowcard { background: var(--purple); color: var(--ink); border-radius: 14px; padding: 16px 16px 14px; }
#mise-cook .nowcard + .nowcard { margin-top: 8px; }
#mise-cook .nowcard .dish { display: flex; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
#mise-cook .nowcard .sw { width: 10px; height: 10px; border-radius: 3px; }
#mise-cook .nowcard h3 { font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin: 6px 0 0; }
#mise-cook .nowcard .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 1.3rem; font-weight: 600; }
#mise-cook .nowcard .meta b { font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#mise-cook .nowcard.idle { background: rgba(252,221,151,.1); color: var(--panel-text); }
#mise-cook .nowcard.late { background: #ffb4a8; color: var(--ink); }
#mise-cook .row { display: flex; align-items: center; gap: 12px; background: rgba(252,221,151,.08); border-radius: 10px; padding: 12px 14px; min-height: 54px; font-size: 1.4rem; }
#mise-cook .row + .row { margin-top: 8px; }
#mise-cook .row .t { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 66px; white-space: nowrap; }
#mise-cook .row .nm { flex: 1; min-width: 0; }
#mise-cook .row .sw { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
#mise-cook .row .r { margin-left: auto; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; white-space: nowrap; }
#mise-cook .row .r.b { font-size: 1.3rem; font-weight: 700; text-transform: none; letter-spacing: 0; opacity: 1; }
#mise-cook .row.done .nm { text-decoration: line-through; opacity: .5; }
#mise-cook .actions { position: fixed; left: 0; right: 0; bottom: 0; background: var(--panel); padding: 14px 20px 22px; border-top: 1px solid rgba(252,221,151,.15); }
#mise-cook .actions .in2 { max-width: 560px; margin: 0 auto; display: flex; gap: 10px; }
#mise-cook .actions .btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 20px; border: 1px solid transparent; border-radius: 3px; font-size: 14px; font-weight: 700; background: var(--blue); color: var(--ink); }
#mise-cook .actions .btn.outline { background: transparent; border-color: rgba(252,221,151,.6); color: var(--panel-text); width: 96px; }
#mise-cook .actions .btn:hover { background: var(--purple); }
#mise-cook .actions .btn.outline:hover { background: var(--panel-text); color: var(--ink); }
#mise-cook .foot { margin-top: 26px; font-size: 1.2rem; color: var(--panel-muted); line-height: 1.5; }
#mise-cook .foot b { color: var(--panel-text); }

/* ---------- tablet ---------- */
@media (max-width: 900px) {
	#mise .scards { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	#mise { padding: 14px 14px 40px; }
	#mise .hero { padding: 2px 0 16px; }
	#mise .hero h1 { font-size: 3.2rem; }
	#mise .hero .lede .ab { display: inline-block; margin-top: 4px; }

	/* Two across still shows the photograph big enough to recognise the dish;
	   one across would push the search box and the menu off the first screen. */
	#mise .scards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	#mise .scards .nm { padding: 8px 10px 10px; font-size: 1.35rem; }
	/* There is no hover on a touch screen, so the overlay would either never
	   appear or never leave. A photo card under "start from a popular dish" is
	   already obviously tappable; drop it. */
	#mise .scards .go { display: none; }
	#mise .scards .pic { padding-top: 66%; }

	#mise .working { padding: 14px; border-radius: 12px; }
	#mise .working .wsteps { gap: 6px 14px; }
	#mise .working .wsteps li { font-size: 1.2rem; }
	#mise .skel { padding: 16px 14px; border-radius: 14px; }
	#mise .chip.skel { min-width: 0; }
	#mise .hero .lede { font-size: 1.5rem; }
	#mise .hero .mark { font-size: 1.15rem; }
	#mise .hero .mark .tag { display: none; }
	#mise .builder { padding: 16px 14px; border-radius: 12px; }
	/* 16px keeps iOS Safari from zooming the viewport on focus. */
	#mise .searchbox input { font-size: 16px; height: 50px; padding-right: 118px; text-overflow: ellipsis; }
	#mise .searchbox .ico { top: 15px; }
	#mise .searchbox .clear { top: 7px; }
	#mise .results a { font-size: 16px; }
	#mise .chips { flex-direction: column; gap: 8px; }
	#mise .chip { width: 100%; border-radius: 12px; padding: 8px 6px 8px 14px; }
	#mise .chip .nm { flex: 1; flex-direction: column; align-items: flex-start; gap: 3px; }
	#mise .chip.add { justify-content: center; padding: 0 16px; }
	#mise .addrow { max-width: none; }
	#mise .controls { grid-template-columns: 1fr; gap: 18px; border-top: 0; margin-top: 14px; padding: 14px; background: rgba(58,26,27,.05); border-radius: 10px; }
	#mise .two { grid-template-columns: 1fr; gap: 12px; }
	#mise .card { padding: 16px 14px; }

	/* Screen 1: the menu rows collapse and the serve settings hide behind a bar. */
	#mise .chip.main { background: var(--ink); border-color: var(--ink); color: var(--white); }
	#mise .chip.main small { opacity: .75; }
	#mise .chip.main small a { color: var(--blue); }
	#mise .chip .x { width: 40px; height: 40px; }
	#mise #mise-servebar { align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 56px; margin-top: 18px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--ink); color: var(--tan); font-size: 15px; font-weight: 700; }
	#mise #mise-servebar b { color: var(--white); }
	#mise #mise-servebar .chg { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

	/* Screen 2: the timeline goes light on small screens -- a dark panel that
	   tall on a phone swamps the page. Cooking mode stays dark. */
	#mise .plan { padding: 18px 14px 20px; border-radius: 14px; background: var(--white); color: var(--ink); border: 1px solid var(--ink-xlt); }
	#mise .plan .label { color: var(--ink); opacity: .65; }
	#mise .startline { font-size: 1.8rem; }
	#mise .startline b { color: var(--ink); }
	#mise .startline .sub { color: rgba(58,26,27,.7); }
	#mise .startline.late b { color: var(--red); }
	#mise .gantt { background: rgba(58,26,27,.05); padding: 12px 10px; }
	#mise .lane { margin-bottom: 12px; }
	#mise .lname { font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
	#mise .track { height: 26px; background: rgba(58,26,27,.08); }
	#mise .nowline { border-color: var(--ink); }
	#mise .axis, #mise .legend { color: rgba(58,26,27,.7); }
	#mise .legend i { background: var(--ink); }
	#mise .legend i.p { background: repeating-linear-gradient(45deg, rgba(58,26,27,.55) 0 4px, rgba(58,26,27,.2) 4px 8px); }
	#mise .notice.ok { background: rgba(76,175,80,.12); }
	#mise .notice.ok b { color: #2e7d32; }
	#mise .notice.warn { background: rgba(244,67,54,.1); }
	#mise .notice.warn b { color: #c62828; }
	#mise .conductor { border: 1px solid var(--ink-xlt); }
	#mise .step { grid-template-columns: 62px 10px 1fr; padding: 10px 12px; gap: 2px 10px; }
	#mise .step .tag { grid-column: 3; text-align: left; }
	#mise .plan .cta { flex-direction: column; align-items: stretch; }
	#mise .plan .cta .btn.outline { border-color: var(--ink); color: var(--ink); }
	#mise .plan .cta .btn.outline:hover { background: var(--ink); color: var(--white); }
	#mise .sharebox input { border-color: var(--ink-lt); background: rgba(0,0,0,.04); color: var(--ink); }
	#mise .sharebox .note { color: rgba(58,26,27,.7); }
	#mise #mise-cookbtn { width: 100%; height: 58px; border-radius: 10px; background: var(--green); color: #fff; font-size: 15px; }
	#mise #mise-cookbtn:hover { background: #3d8b40; }
}

@media (prefers-reduced-motion: reduce) {
	#mise .blk { transition: none; }
}

/* The weekly-digest banner (footerA.php) is fixed to the bottom of every page.
   Cooking mode's own action bar lives there, so hide the banner while the
   overlay is open rather than stacking two bars on a phone. */
body.mise-cooking #rr-digest-banner { display: none !important; }
body.mise-cooking { overflow: hidden; }