/* Memory Anchor — UI Pro Pack
   - Dark mode (html[data-theme="dark"])
   - Glass style (add .ma-glass to #memory-app)
   - Breathing bar visuals during ambient break
   - Premium-feel buttons, inputs, chips, bars
   - Tooltip styles
*/

/* ---------- Light theme variables ---------- */
:root{
  --ink:#0f2a1f;
  --muted:#6b7a85;
  --bg:#f6faf7;
  --card:#ffffff;
  --brand:#2dc16c;
  --brand-2:#1fb26f;
  --brand-3:#10a37f;
  --ring:#10a37f22;
  --stroke:#d7f1de;
  --shadow:0 14px 40px rgba(16,163,127,0.18);
  --bar1:#0fa37f;
  --bar2:#2dc16c;
  --chipA:#f3fff9;
  --chipB:#eafff4;
  --stripeA:#2dc16c;
  --stripeB:#15b46e;
  --stripeC:#0fa37f;
}

/* ---------- Dark mode variables ---------- */
html[data-theme="dark"]{
  --ink:#eaf6ef;
  --muted:#9bb3aa;
  --bg:#0f1714;
  --card:#0f1d18;
  --brand:#1fb26f;
  --brand-2:#10a37f;
  --brand-3:#08936e;
  --ring:#10a37f44;
  --stroke:#144c3b;
  --shadow:0 16px 48px rgba(0,0,0,0.5);
  --bar1:#10a37f;
  --bar2:#2dc16c;
  --chipA:#0f2a20;
  --chipB:#0f3326;
  --stripeA:#10a37f;
  --stripeB:#2dc16c;
  --stripeC:#7ce7b4;
}

/* Scope styles to the app to avoid landing page clashes */
#memory-app{
  color:var(--ink);
}

/* Cards */
#memory-app .app{
  background: linear-gradient(180deg, var(--card) 0%, color-mix(in oklab, var(--card) 90%, black 10%) 100%);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px 18px 20px;
  border: 1px solid var(--stroke);
  position: relative;
  overflow: hidden;
}
#memory-app .app::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--stripeA), var(--stripeB), var(--stripeC));
  opacity:.85;
}

/* Glass option */
#memory-app.ma-glass .app{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
html[data-theme="dark"] #memory-app.ma-glass .app{
  background: linear-gradient(180deg, rgba(16,30,25,.42), rgba(16,30,25,.16));
  border-color: rgba(255,255,255,.12);
}

/* Headings */
#memory-app .app h2{
  margin: 6px 0 8px;
  color: color-mix(in oklab, var(--ink) 90%, #0c5e31 10%);
  letter-spacing: .2px;
}

/* Buttons */
#memory-app .btn{
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-2) 100%);
  color:#fff; border:none;
  padding:12px 18px; border-radius: 12px;
  font-weight: 700; cursor:pointer;
  box-shadow: 0 8px 18px rgba(45,193,108,.28);
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
#memory-app .btn:hover{ filter: saturate(1.05) }
#memory-app .btn:active{ transform: translateY(1px) scale(.98) }
#memory-app .btn.secondary{
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 90%, white 10%) 0%, color-mix(in oklab, var(--card) 90%, white 4%) 100%);
  color:var(--ink); border: 1px solid var(--stroke);
  box-shadow: 0 6px 14px rgba(22,108,50,.08);
}

/* Inline rows */
#memory-app .inline{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* Inputs & selects */
#memory-app .select,
#memory-app input[type="text"],
#memory-app input[type="number"],
#memory-app input[type="range"]{
  width:100%; padding:11px 12px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background:var(--card);
  color:var(--ink);
  box-shadow: 0 1px 0 rgba(16,163,127,.04) inset;
  outline:none;
  transition: box-shadow .2s ease, border-color .2s ease;
}
#memory-app .select:focus,
#memory-app input:focus{
  border-color: color-mix(in oklab, var(--brand) 50%, var(--stroke) 50%);
  box-shadow: 0 0 0 4px var(--ring);
}

/* Chips */
#memory-app .chips{ display:flex; gap:8px; flex-wrap:wrap; }
#memory-app .chip{
  padding:6px 10px; border-radius: 999px;
  background: linear-gradient(180deg, var(--chipA) 0%, var(--chipB) 100%);
  color: color-mix(in oklab, var(--ink) 80%, #12633a 20%);
  border:1px solid var(--stroke); font-size:13px; font-weight:600;
}

/* Progress bars */
#memory-app .bar{
  height:10px; background: color-mix(in oklab, var(--chipB) 70%, white 30%);
  border-radius: 10px; overflow:hidden;
  border:1px solid var(--stroke);
}
#memory-app .bar>span{
  display:block; height:100%;
  background: linear-gradient(90deg, var(--bar1), var(--bar2));
  transition: width .45s cubic-bezier(.22,1,.36,1);
}

/* Lists */
#memory-app .list{ list-style:none; padding:0; margin:0 }
#memory-app .list li{
  padding:10px 0;
  border-bottom:1px dashed color-mix(in oklab, var(--stroke) 80%, transparent 20%);
}
#memory-app .list li:last-child{ border-bottom:0 }

/* Small text */
#memory-app .small{ font-size:13px; color:var(--muted) }

/* Timer number pulse during countdown */
#memory-app #t{
  display:inline-block;
  animation: ma-pulse 1s ease-in-out infinite;
}
@keyframes ma-pulse{
  0%{ transform: scale(1); opacity: .95 }
  50%{ transform: scale(1.06); opacity: 1 }
  100%{ transform: scale(1); opacity: .95 }
}

/* Gentle separators inside cards */
#memory-app hr{
  height:1px; border:none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--stroke) 70%, transparent) , transparent);
  margin: 10px 0 14px;
}

/* ---------- Tooltip styles ---------- */
#memory-app .ma-tip{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-left:6px;
  border-radius:50%; font-size:11px; font-weight:800;
  color:#0c5e31; background: color-mix(in oklab, var(--chipB) 70%, white);
  border:1px solid var(--stroke); cursor:help; position:relative;
}
html[data-theme="dark"] .ma-tip{ color:#b7ffe3 }
#memory-app .ma-tip__bubble{
  position:absolute; z-index:10; left:50%; transform: translateX(-50%) translateY(-6px);
  bottom:100%; white-space:nowrap;
  background: var(--card); color: var(--ink);
  border:1px solid var(--stroke); border-radius:10px; padding:8px 10px;
  box-shadow: var(--shadow); font-size:12px; display:none;
}
#memory-app .ma-tip:hover .ma-tip__bubble{ display:block }

/* ---------- Breathing bar ---------- */
#memory-app .ma-breath{
  margin: 14px auto 0;
  width: 100%;
  max-width: 420px;
  height: 12px;
  background: color-mix(in oklab, var(--chipB) 70%, white);
  border:1px solid var(--stroke);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
#memory-app .ma-breath__fill{
  position:absolute; left:0; top:0; bottom:0; width:12%;
  background: linear-gradient(90deg, var(--bar1), var(--bar2));
  animation: ma-breathe 6s ease-in-out infinite;
  border-right: 1px solid rgba(255,255,255,0.6);
}
@keyframes ma-breathe{
  0%   { width: 12% }
  25%  { width: 100% }  /* inhale */
  50%  { width: 100% }  /* hold */
  75%  { width: 12% }   /* exhale */
  100% { width: 12% }
}
#memory-app .ma-breath__labels{
  display:flex; justify-content:space-between; font-size:12px; color:var(--muted);
  margin-top:6px;
}

/* ---------- Floating controls ---------- */
#memory-app #ma-controls{
  position: sticky; top: 8px; z-index: 20;
  display:flex; gap:8px; justify-content:flex-end; margin-bottom: 8px;
}
#memory-app #memory-app #ma-controls .ctl{
  border:1px solid var(--stroke);
  background: color-mix(in oklab, var(--card) 92%, white);
  color:var(--ink);
  border-radius:999px; padding:8px 10px; cursor:pointer; font-size:12px; font-weight:700;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}
#memory-app #memory-app #memory-app #ma-controls .ctl:hover{ box-shadow: 0 8px 16px rgba(0,0,0,.10) }