/* Navigation-state fixes kept separate so they are easy to merge into MAATRAM's shared CSS. */
.brand {
  font: 700 15px var(--sans);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* The plan needs block layout after the generic .screen rule hides it. */
.plan.active { display: block; }

/* The base stylesheet declares .plan as block later in the cascade. Without this
   guard it sits below the introduction before a plan has been generated. */
.plan:not(.active) { display: none; }

/* Dark glass: retains MAATRAM's night-mode identity while adding depth and polish. */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
body::before { top: 12vh; left: -16vw; background: rgba(0, 226, 150, .12); }
body::after { right: -13vw; bottom: -16vw; background: rgba(31, 190, 205, .12); }

.day-card,
.plan-side,
.daily-tracker,
.safety-note,
.swap-option,
.modal-inner {
  background: linear-gradient(135deg, rgba(19, 42, 33, .68), rgba(7, 18, 14, .78)) !important;
  border-color: rgba(141, 227, 192, .28) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .2), inset 0 1px rgba(234, 255, 246, .08);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.daily-tracker {
  margin-top: 18px;
  padding: 24px;
  border: 1px solid rgba(141, 227, 192, .28);
  border-radius: 12px;
}

.daily-tracker h3 {
  margin: 5px 0 4px;
  color: var(--white);
  font: 600 25px var(--sans);
  letter-spacing: -.8px;
}

.daily-tracker h3 em { color: var(--green); font-style: normal; }
.daily-tracker > div > p:last-child { color: #8dac9f; font-size: 13px; margin: 0; }

.habit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}

.habit-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(141, 227, 192, .24);
  background: rgba(3, 12, 9, .34);
  border-radius: 8px;
}

.habit-card > span { font-size: 21px; }
.habit-card b { display: block; font-size: 12px; }
.habit-card small { display: block; margin-top: 2px; color: #82a296; font-size: 11px; }
.habit-card strong { color: var(--green); font: 10px var(--mono); white-space: nowrap; }
.habit-card button { grid-column: 2 / 4; border: 1px solid rgba(75, 169, 128, .58); border-radius: 4px; padding: 8px; color: #c6e8da; background: rgba(17, 60, 43, .34); font: 10px var(--mono); cursor: pointer; }
.habit-card button:disabled { color: var(--green); background: rgba(20, 113, 73, .22); cursor: default; }

.reward-status { margin: 18px 0 0; color: #93b9aa; font-size: 12px; }
.reward-status b { color: var(--green); }.reward-status.unlocked { color: #dfffee; }

@media (max-width: 850px) { .habit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .daily-tracker { padding: 18px; }.habit-grid { grid-template-columns: 1fr; }.daily-tracker h3 { font-size: 22px; } }
/* Site fonts: Sora headings + Inter body (neon), Plus Jakarta Sans (minimal) — same as the other feature pages */
:root{--display:'Sora','Inter',system-ui,sans-serif}
.intro h1,.question h2,.loading h2,.plan h2,.modal-inner h2,.plan-side h3,.daily-tracker h3{font-family:var(--display);letter-spacing:-.03em}
.brand{font-family:var(--display)}

/* Minimal Glass skin (Customize UI, localStorage maatram_theme) — same tokens as theme.js minimal */
html.minimal{--ink:#0B0C0B;--panel:rgba(255,255,255,.055);--line:rgba(255,255,255,.13);--mint:#C9CFC9;--muted:#8A928E;--green:#9CC0B2;--lime:#C9CFC9;--white:#ECEFEE;--sans:"Plus Jakarta Sans","Inter",system-ui,sans-serif;--mono:"Plus Jakarta Sans","Inter",system-ui,sans-serif;--display:"Plus Jakarta Sans","Sora",sans-serif}
html.minimal body{background:#0B0C0B!important;color:#ECEFEE}
html.minimal .stars,html.minimal .orb,html.minimal body::before,html.minimal body::after{display:none!important}
html.minimal .nav{border-bottom:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important}
html.minimal .brand span{background:#9CC0B2!important;color:#0B0C0B!important}
html.minimal .eyebrow,html.minimal .kicker,html.minimal .card-label,html.minimal .wizard-top,html.minimal .wizard-bottom,html.minimal h3,html.minimal .day-top,html.minimal .points-copy{color:#8A928E!important}
html.minimal .lede{color:#8A928E!important}
html.minimal .primary{color:#0B0C0B!important;box-shadow:none!important}
html.minimal .primary:hover{background:#9CC0B2!important}
html.minimal .micro{color:#8A928E!important}
html.minimal .orb{border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important}
html.minimal .hero-card{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important}
html.minimal .hero-meter{border-top:1px solid rgba(255,255,255,.13)!important}
html.minimal .hero-meter i{background:rgba(255,255,255,.055)!important}
html.minimal .hero-meter b{background:#9CC0B2!important}
html.minimal .hero-streak{background:rgba(255,255,255,.055)!important;color:#ECEFEE!important}
html.minimal .wizard-top,html.minimal .wizard-bottom{border-bottom:1px solid rgba(255,255,255,.13)!important}
html.minimal .wizard-bottom{border-top:1px solid rgba(255,255,255,.13)!important}
html.minimal .progress{background:rgba(255,255,255,.055)!important}
html.minimal .question-copy{color:#8A928E!important}
html.minimal .input-grid label{color:#8A928E!important}
html.minimal .input-grid label>div{border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.055)!important}
html.minimal .input-grid span{color:#8A928E!important}
html.minimal .validation{color:#ECEFEE!important}
html.minimal .wizard-bottom>span{color:#8A928E!important}
html.minimal .choice-grid button,html.minimal .choice-list button{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.13)!important}
html.minimal .choice-grid small,html.minimal .choice-list small{color:#8A928E!important}
html.minimal .choice-grid button.selected,html.minimal .choice-list button.selected{background:rgba(255,255,255,.055)!important}
html.minimal .question h3 span{color:#8A928E!important}
html.minimal .chip-row button{border:1px solid rgba(255,255,255,.18)!important;background:rgba(255,255,255,.055)!important;color:#8A928E!important}
html.minimal .chip-row button.selected{background:rgba(255,255,255,.055)!important}
html.minimal .other-input{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.13)!important}
html.minimal .loader-mark{box-shadow:none!important}
html.minimal .scan{background:rgba(255,255,255,.055)!important}
html.minimal .loading>p:last-child{color:#8A928E!important}
html.minimal .ghost{border:1px solid rgba(255,255,255,.18)!important;color:#ECEFEE!important}
html.minimal .safety-note{border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important;color:#8A928E!important}
html.minimal .day-tabs button{border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important;color:#8A928E!important}
html.minimal .day-tabs button.selected{color:#0B0C0B!important}
html.minimal .day-card,html.minimal .plan-side{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.13)!important}
html.minimal .day-top{border-bottom:1px solid rgba(255,255,255,.13)!important}
html.minimal .meal-row{border-bottom:1px solid rgba(255,255,255,.13)!important}
html.minimal .meal-type{color:#8A928E!important}
html.minimal .meal-row p{color:#8A928E!important}
html.minimal .swap{border:1px solid rgba(255,255,255,.18)!important}
html.minimal .hydration{color:#8A928E!important}
html.minimal .plan-side h3{color:#ECEFEE!important}
html.minimal .plan-side p:not(.card-label){color:#8A928E!important}
html.minimal .mission-line{background:rgba(255,255,255,.055)!important}
html.minimal .private-note{color:#8A928E!important}
html.minimal .swap-modal{background:rgba(255,255,255,.055)!important}
html.minimal .modal-inner{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.18)!important;box-shadow:none!important}
html.minimal .modal-close{color:#8A928E!important}
html.minimal .swap-option{border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.055)!important}
html.minimal .swap-option small{color:#8A928E!important}
html.minimal body::before{background:#9CC0B2!important}
html.minimal body::after{background:#9CC0B2!important}
html.minimal .day-card,html.minimal .plan-side,html.minimal .daily-tracker,html.minimal .safety-note,html.minimal .swap-option,html.minimal .modal-inner{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.3)!important;box-shadow:0 18px 40px rgba(0,0,0,.45)!important}
html.minimal .daily-tracker{border:1px solid rgba(255,255,255,.3)!important}
html.minimal .daily-tracker > div > p:last-child{color:#8A928E!important}
html.minimal .habit-card{border:1px solid rgba(255,255,255,.3)!important;background:rgba(255,255,255,.05)!important}
html.minimal .habit-card small{color:#8A928E!important}
html.minimal .habit-card button{border:1px solid rgba(255,255,255,.18)!important;color:#ECEFEE!important;background:rgba(255,255,255,.05)!important}
html.minimal .habit-card button:disabled{background:rgba(255,255,255,.05)!important}
html.minimal .reward-status{color:#8A928E!important}
html.minimal .reward-status.unlocked{color:#ECEFEE!important}
html.minimal .nav{background:rgba(11,12,11,.7)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:rgba(255,255,255,.1)!important}
html.minimal .brand span{background:rgba(255,255,255,.09)!important;color:#ECEFEE!important;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
html.minimal .hero-card,html.minimal .day-card,html.minimal .plan-side,html.minimal .daily-tracker,html.minimal .safety-note,html.minimal .swap-option,html.minimal .modal-inner,html.minimal .habit-card{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.13)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.07)!important}
html.minimal .primary{background:linear-gradient(90deg,#9CC0B2,#7E9C8E)!important;color:#0B0C0B!important}
html.minimal .primary:hover{background:#B4D1C6!important}
html.minimal .choice-grid button.selected,html.minimal .choice-list button.selected,html.minimal .chip-row button.selected{background:rgba(156,192,178,.14)!important;border-color:#9CC0B2!important;color:#ECEFEE!important}
html.minimal .choice-grid button.selected,html.minimal .choice-list button.selected{box-shadow:inset 3px 0 #9CC0B2!important}
html.minimal .day-tabs button.selected{background:linear-gradient(90deg,#9CC0B2,#7E9C8E)!important;color:#0B0C0B!important;border-color:#9CC0B2!important}
html.minimal .validation{color:#D98A94!important}
html.minimal .input-grid input{background:transparent!important;box-shadow:none!important}

/* Top bar: same link style as the shared site nav (#mnav) */
.intro h1{font-size:clamp(44px,6.2vw,86px)}
.brand{font:700 15px 'Sora','Inter',system-ui,sans-serif}
.brand span{background:linear-gradient(135deg,#2fe38f,#37b6ff);color:#04120f;font-weight:800}
.nav nav{gap:4px;align-items:center}
.nav a.mn-link{font:700 10.5px 'Sora','Inter',system-ui,sans-serif;letter-spacing:1px;text-transform:uppercase;color:#7da99b;padding:7px 11px;border-radius:100px;transition:all .25s;white-space:nowrap}
.nav a.mn-link:hover{color:#eafff6;background:rgba(55,182,255,.1)}
.nav a.mn-link.active{color:#04120f;background:linear-gradient(90deg,#2fe38f,#37b6ff)}
html.minimal .nav a.mn-link{color:#8A928E!important}
html.minimal .nav a.mn-link:hover{background:rgba(255,255,255,.07)!important;color:#ECEFEE!important}
html.minimal .nav a.mn-link.active{background:linear-gradient(90deg,#9CC0B2,#7E9C8E)!important;color:#0B0C0B!important}
html.minimal .swap-modal{background:rgba(0,0,0,.7)!important}

/* wellness points: completed check + milestone confirmation */
.habit-card{transition:border-color .3s,box-shadow .3s}
.habit-card.done{border-color:rgba(18,230,154,.55);box-shadow:inset 3px 0 var(--green)}
html.minimal .habit-card.done{border-color:rgba(156,192,178,.55)!important;box-shadow:inset 3px 0 #9CC0B2!important}
.reward-status a{color:inherit;text-decoration:underline}
.reward-status.bump{animation:wlBump .6s cubic-bezier(.2,1.3,.3,1)}
@keyframes wlBump{from{transform:translateY(4px) scale(.98);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.reward-status.bump{animation:none}.habit-card{transition:none}}

/* Top bar at every width: brand links home; the links become a single-row strip
   that scrolls sideways inside the bar (same pattern as the shared #mnav). */
.brand{flex:0 0 auto;white-space:nowrap}
.nav a.brand{font:700 15px var(--display);letter-spacing:-.5px;color:var(--white)}
.nav a.brand:hover{color:var(--white)}
.nav nav{min-width:0;flex:0 1 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav nav::-webkit-scrollbar{display:none}
.nav a.mn-link{flex:0 0 auto}
@media (max-width:850px){.nav{gap:14px}}

/* Visible keyboard focus (the base stylesheet removes input outlines) */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.input-grid label>div:focus-within{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.other-input:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-color:var(--green)}
.nav a.mn-link:focus-visible{outline-offset:-2px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scan i{animation:none}.primary,.progress i,.nav a.mn-link{transition:none}}

/* Daily guide + meal badges (meal catalogue v2) */
.daily-guide .guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px}
.daily-guide article{border:1px solid rgba(141,227,192,.22);border-radius:8px;padding:13px;background:rgba(8,20,15,.45)}
.daily-guide article span{display:block;font:10px var(--mono);letter-spacing:1.4px;color:#78a798}
.daily-guide article b{display:block;margin:6px 0 4px;font:600 18px var(--display,var(--sans));color:var(--green)}
.daily-guide article small{display:block;color:#82a296;font-size:11.5px;line-height:1.45}
.guide-tips{margin:16px 0 0;padding-left:18px;color:#a9c7bb;font-size:13px;line-height:1.6}
.meal-badge{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid rgba(18,230,154,.35);border-radius:99px;color:var(--green);font:600 9px var(--mono);letter-spacing:1px;font-style:normal;vertical-align:2px}
.swap-option .meal-badge{margin:6px 0 0}
@media(max-width:850px){.daily-guide .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.daily-guide .guide-grid{grid-template-columns:1fr}}
html.minimal .daily-guide article{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.04)}
html.minimal .daily-guide article small,html.minimal .guide-tips{color:#8A928E}
html.minimal .meal-badge{border-color:rgba(255,255,255,.25)}
/* How to make: side panel */
.row-btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.recipe-modal{justify-content:flex-end;padding:0}
.recipe-modal .modal-inner{width:min(460px,100%);height:100%;max-height:100vh;overflow-y:auto;border-radius:14px 0 0 14px;padding:30px 26px 40px}
.recipe-modal h2{font-size:clamp(26px,4vw,34px);letter-spacing:-1px;margin:8px 34px 6px 0;line-height:1.1}
.recipe-modal h3{margin:22px 0 8px;font-size:10px}
.recipe-meta{color:var(--green);font:12px var(--mono);margin:0}
.recipe-list{margin:0;padding-left:20px;color:#c7ddd4;font-size:14px;line-height:1.55}
.recipe-list li{margin-bottom:7px}
.recipe-note{margin-top:22px;color:#6f9586;font-size:11.5px;line-height:1.5}
@media(max-width:560px){.meal-row .row-btns{grid-column:2;justify-content:flex-start}.recipe-modal .modal-inner{border-radius:0}}
html.minimal .recipe-list{color:#C9CFC9}