/* Rise With Teagan brand tokens (kb/design-system/tokens.css). Never hardcode the hex values in rules. */
:root {
	--rwt-terracotta:    var(--e-global-color-primary, #BC5F50);
	--rwt-sienna:        var(--e-global-color-f220437, #A14A3A);
	--rwt-tint:          var(--e-global-color-ec00e88, #F0D5CF);
	--rwt-espresso:      var(--e-global-color-text, #3D322B);
	--rwt-taupe:         var(--e-global-color-c2248c7, #887D78);
	--rwt-warm-white:    var(--e-global-color-secondary, #FFFBF8);
	--rwt-warm-cream:    var(--e-global-color-accent, #F5E9E2);
	--rwt-white:         var(--e-global-color-d3c7489, #FFFFFF);
	--rwt-serif: var(--e-global-typography-17f6d88-font-family, "Fraunces"), Georgia, serif;
	--rwt-sans:  var(--e-global-typography-primary-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rwt-radius:       12px;
	--rwt-radius-panel: 16px;
	--rwt-radius-pill:  999px;
	--rwt-focus:        0 0 0 3px rgba(188, 95, 80, 0.15);
	--rwt-ease:         0.15s ease;
}

/* Rise With Teagan: cooking mode. Everything scoped under .rck-ov / .rck-launch so the theme can't restyle it. */

/* ---------- the "Start cooking" button on the recipe page ---------- */
.rck-launch{margin:26px 0 12px}
.rck-launch .rck-start{display:inline-flex;align-items:center;background:var(--rwt-terracotta);color:var(--rwt-warm-white);border:0;border-radius:var(--rwt-radius-pill);padding:13px 30px;font:500 15px/1.05 var(--rwt-sans);text-transform:none;letter-spacing:normal;box-shadow:none;cursor:pointer;transition:background-color var(--rwt-ease)}
.rck-launch .rck-start:hover,.rck-launch .rck-start:focus-visible{background:var(--rwt-sienna);color:var(--rwt-warm-white)}
.rck-launch .rck-start:focus-visible{outline:0;box-shadow:var(--rwt-focus)}

/* ---------- the full-screen view ---------- */
html.rck-lock,html.rck-lock body{overflow:hidden}
.rck-ov{position:fixed;inset:0;z-index:1000020;background:var(--rwt-warm-white);color:var(--rwt-espresso);overflow-y:auto;-webkit-overflow-scrolling:touch;font-family:var(--rwt-sans);padding:max(20px,env(safe-area-inset-top)) 16px 0}
.rck-ov :where(button,input,label,h1,h2,h3,p,ul,ol,li){font-family:inherit;text-transform:none;letter-spacing:normal;box-shadow:none}

.rck-ov .rck-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;max-width:760px;margin:0 auto 20px}
.rck-ov .rck-kicker{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--rwt-terracotta)}
.rck-ov h1{margin:6px 0 10px;font:400 28px/1.12 var(--rwt-serif);letter-spacing:-.01em;color:var(--rwt-terracotta)}
.rck-ov .rck-awake{display:inline-flex;align-items:center;gap:7px;margin:0;padding:5px 12px;border-radius:var(--rwt-radius-pill);background:var(--rwt-warm-cream);font-size:13px;color:var(--rwt-espresso)}
.rck-ov .rck-awake[hidden]{display:none}
.rck-ov .rck-awake::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--rwt-terracotta)}
.rck-ov .rck-close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--rwt-tint);background:var(--rwt-white);color:var(--rwt-espresso);font-size:26px;line-height:1;cursor:pointer;padding:0}

.rck-ov .rck-body{max-width:760px;margin:0 auto;display:grid;gap:16px;padding-bottom:24px}
.rck-ov section{background:var(--rwt-white);border:1px solid var(--rwt-warm-cream);border-radius:var(--rwt-radius-panel);padding:20px 18px}
.rck-ov h2{margin:0 0 6px;font:400 22px/1.2 var(--rwt-serif);color:var(--rwt-terracotta)}
.rck-ov .rck-serves{margin:0 0 6px;font-size:14px;color:var(--rwt-taupe)}
.rck-ov h3{margin:18px 0 2px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--rwt-terracotta)}

/* ingredients: one row each, name on top, amount underneath */
.rck-ov ul{list-style:none;margin:0;padding:0}
.rck-ov .rck-need li+li{border-top:1px solid var(--rwt-warm-cream)}
.rck-ov .rck-need label{display:flex;gap:14px;align-items:flex-start;padding:13px 0;cursor:pointer}
.rck-ov .rck-need input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:1px 0 0;border:1.5px solid var(--rwt-tint);border-radius:50%;background:var(--rwt-white);cursor:pointer;display:grid;place-content:center;transition:background-color var(--rwt-ease)}
.rck-ov .rck-need input::after{content:"";width:6px;height:11px;border:solid var(--rwt-warm-white);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);opacity:0}
.rck-ov .rck-need input:checked{background:var(--rwt-terracotta);border-color:var(--rwt-terracotta)}
.rck-ov .rck-need input:checked::after{opacity:1}
.rck-ov .rck-need input:focus-visible{outline:0;box-shadow:var(--rwt-focus)}
.rck-ov .rck-ing{display:grid;gap:3px;min-width:0}
.rck-ov .rck-name{font-size:18px;line-height:1.35}
.rck-ov .rck-amt{font-size:16px;line-height:1.35;font-weight:500;color:var(--rwt-terracotta)}
.rck-ov .rck-note{font-size:14px;line-height:1.4;color:var(--rwt-taupe)}
.rck-ov .rck-need input:checked+.rck-ing{opacity:.45}
.rck-ov .rck-need input:checked+.rck-ing .rck-name{text-decoration:line-through}

/* method */
.rck-ov .rck-mhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.rck-ov .rck-mhead h2{margin:0}
.rck-ov .rck-toggle{border:1px solid var(--rwt-tint);background:var(--rwt-white);color:var(--rwt-terracotta);border-radius:var(--rwt-radius-pill);padding:7px 14px;font-size:14px;font-weight:500;cursor:pointer}
.rck-ov .rck-step{margin-top:16px}
.rck-ov .rck-count{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:14px;font-weight:500;color:var(--rwt-terracotta);white-space:nowrap}
.rck-ov .rck-bar{flex:1;height:4px;border-radius:var(--rwt-radius-pill);background:var(--rwt-warm-cream);overflow:hidden}
.rck-ov .rck-bar i{display:block;height:100%;border-radius:inherit;background:var(--rwt-terracotta)}
.rck-ov .rck-text{margin:0;font-size:22px;line-height:1.5}
.rck-ov .rck-all{list-style:none;counter-reset:rck;margin:16px 0 0;padding:0;display:grid;gap:18px;font-size:18px;line-height:1.5}
.rck-ov .rck-all li{counter-increment:rck;display:grid;grid-template-columns:32px 1fr;gap:14px}
.rck-ov .rck-all li::before{content:counter(rck);width:32px;height:32px;border-radius:50%;background:var(--rwt-terracotta);color:var(--rwt-warm-white);font:400 16px/32px var(--rwt-serif);text-align:center}

/* Back / Next stay at the bottom of the screen, so they're always under your thumb */
.rck-ov .rck-nav{position:sticky;bottom:0;z-index:1;display:flex;gap:10px;max-width:760px;margin:0 auto;padding:12px 0 max(16px,env(safe-area-inset-bottom));background:var(--rwt-warm-white);border-top:1px solid var(--rwt-warm-cream)}
.rck-ov .rck-nav[hidden]{display:none}
.rck-ov .rck-nav button{flex:1;min-height:56px;border-radius:var(--rwt-radius-pill);font-size:17px;font-weight:500;cursor:pointer;border:1px solid var(--rwt-terracotta);transition:background-color var(--rwt-ease)}
.rck-ov .rck-back{background:var(--rwt-white);color:var(--rwt-terracotta)}
.rck-ov .rck-back[disabled]{opacity:.35;cursor:default}
.rck-ov .rck-next{flex:1.6 !important;background:var(--rwt-terracotta);color:var(--rwt-warm-white)}
.rck-ov .rck-next:hover{background:var(--rwt-sienna)}

/* home-screen app (1.2.1): keep Back / Next clear of the iPhone home indicator */
@media (display-mode:standalone){.rck-ov .rck-nav{padding-bottom:max(30px,env(safe-area-inset-bottom))}}
html.rwt-standalone .rck-ov .rck-nav{padding-bottom:max(30px,env(safe-area-inset-bottom))}

@media (min-width:801px){
	.rck-ov{padding-top:32px}
	.rck-ov h1{font-size:36px}
	.rck-ov section{padding:24px 28px}
	.rck-ov .rck-text{font-size:26px}
}