/* Marvin Add-on Pack Kit — shared design system (aligned with Marvin Classroom & Bible Study).
   Each pack sets its own --accent / --accent-2 on :root for identity. Local-first, no coin burn. */
:root {
  color-scheme: light;
  --page: #e8f3ee; --paper: #ffffff; --ink: #10272b; --muted: #5b7178; --line: #dce7ea;
  --green: #0b625b; --green-light: #e2f5f2; --green-soft: #d1ece8;
  --blue: #164b7a; --blue-light: #e4eef8; --red: #c03c3c; --red-light: #fde8e8;
  --yellow-light: #fff8e1;
  --accent: #0b625b; --accent-2: #0e7a71; --accent-soft: #e2f5f2;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px; --radius-xl: 20px;
  --shadow-sm: 0 1px 3px rgba(16,39,43,.06); --shadow: 0 4px 20px rgba(16,39,43,.08); --shadow-lg: 0 12px 40px rgba(16,39,43,.12);
  --transition: .2s cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; --page:#dfeee8; --paper:#fffdf4; --ink:#10272b; --muted:#506a68; --line:#cbdcd6; --green-light:#e6f3ed; }
}
@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
* , *::before, *::after { box-sizing: border-box; margin: 0; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 12% 0%, rgba(255,255,255,.6), transparent 26%), linear-gradient(180deg, #f5faf7 0%, var(--page) 460px, #eef6f2 100%);
  color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
a { color: var(--accent); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; opacity:.9; }
h1,h2,h3,h4 { margin:0; letter-spacing:-.02em; line-height:1.15; }
p { margin:0; color: var(--muted); }
.muted { color: var(--muted); font-size:.86rem; }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:9px 18px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font-weight:600; font-size:.88rem; cursor:pointer; transition:all var(--transition); white-space:nowrap; }
.btn:hover { border-color:var(--accent); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn.primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.14); }
.btn.ghost { background:transparent; }
.btn.danger { color:var(--red); border-color:var(--red); }
.btn-sm { min-height:34px; padding:5px 12px; font-size:.8rem; }
.btn-xs { min-height:28px; padding:3px 9px; font-size:.74rem; border-radius:6px; }

input, textarea, select { width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 13px; background:#fff; color:var(--ink); outline:none; transition:border-color var(--transition), box-shadow var(--transition); }
textarea { min-height:90px; resize:vertical; line-height:1.55; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
label { display:grid; gap:6px; color:var(--muted); font-size:.84rem; font-weight:600; }

.pill { display:inline-flex; align-items:center; gap:6px; min-height:26px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.9); color:var(--muted); padding:3px 12px; font-size:.76rem; font-weight:600; }
.pill.good { background:linear-gradient(135deg,#e2f9ef,#d4f5e5); border-color:#a8dcc5; color:#07583d; }
.pill.accent { background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent); }
.chip { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--paper); color:var(--muted); border:1px solid var(--line); cursor:pointer; }
.chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }

.topbar { position:sticky; top:0; z-index:40; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:10px clamp(14px,4vw,36px); border-bottom:1px solid rgba(220,231,234,.6); background:rgba(255,255,255,.9); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); }
.topbar-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-brand-icon { width:40px; height:40px; border-radius:var(--radius-sm); flex:0 0 auto; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; color:#fff; font-size:1.25rem; box-shadow:0 2px 8px rgba(0,0,0,.16); }
.topbar h1 { font-size:1.05rem; font-weight:800; }
.topbar .status { color:var(--muted); font-size:.76rem; margin-top:1px; }
.top-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

.tabs { position:sticky; top:61px; z-index:35; display:flex; gap:2px; padding:0 clamp(14px,4vw,36px); background:rgba(255,255,255,.93); backdrop-filter:blur(20px) saturate(1.3); -webkit-backdrop-filter:blur(20px) saturate(1.3); border-bottom:1px solid rgba(220,231,234,.6); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:12px 15px; border:none; border-bottom:2.5px solid transparent; background:transparent; color:var(--muted); font-size:.85rem; font-weight:600; white-space:nowrap; min-height:46px; cursor:pointer; transition:all var(--transition); }
.tab-btn:hover { color:var(--ink); }
.tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.tab-icon { font-size:1.05rem; }

.wrap { max-width:1120px; margin:0 auto; padding:clamp(16px,3vw,30px) clamp(14px,4vw,36px) 80px; }
.view { display:none; animation:fadeUp .4s ease both; } .view.active { display:block; }
.section-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px; margin-bottom:18px; }
.section-head h2 { font-size:1.5rem; font-weight:800; } .section-head .sub { color:var(--muted); font-size:.9rem; margin-top:3px; }
.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }

.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm); transition:box-shadow var(--transition), transform var(--transition); }
.card.hover:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
.card h3 { font-size:1.05rem; font-weight:700; margin-bottom:4px; }
.card .card-note { color:var(--muted); font-size:.84rem; line-height:1.5; }
.card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:8px; }
.stack { display:grid; gap:10px; } .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .spread { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.field-row { display:grid; gap:10px; }

.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:20px; }
.metric { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); }
.metric .metric-value { font-size:1.7rem; font-weight:800; color:var(--accent); line-height:1; }
.metric .metric-label { font-size:.72rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-top:6px; }

.progress { height:8px; border-radius:999px; background:var(--accent-soft); overflow:hidden; }
.progress .bar { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .5s ease; }

.list-item { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; padding:11px 0; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:0; } .list-item .li-main { min-width:0; } .list-item strong { font-size:.92rem; }
.empty { border:1.5px dashed var(--line); border-radius:var(--radius-lg); padding:30px 20px; text-align:center; color:var(--muted); font-size:.9rem; }
.note-block { font-size:.82rem; color:var(--muted); line-height:1.55; background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; padding:10px 14px; }
.hero { background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#fff; border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow); margin-bottom:20px; }
.hero h2 { font-size:1.4rem; } .hero p { color:rgba(255,255,255,.9); margin-top:6px; }

.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:999px; font-size:.86rem; font-weight:600; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:all var(--transition); z-index:100; max-width:90vw; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.marvin-cta { background:linear-gradient(135deg,#163b6b,#164b7a); border-color:#1c477a; color:#eaf2fb; }
.marvin-cta:hover { background:linear-gradient(135deg,#123157,#163b6b); }
@media (max-width:620px){
  /* Reclaim the top of the screen: tighter header, drop the subtitle line. */
  .topbar{padding:8px clamp(10px,3vw,16px)} .topbar h1{font-size:.95rem} .topbar .status{display:none}
  .topbar-brand-icon{width:34px;height:34px} .section-head h2{font-size:1.3rem} .hide-sm{display:none}
  /* Compact WRAP so every tab is reachable (a hidden-scrollbar single row leaves
     off-screen tabs unreachable — no visible scrollbar, mouse can't drag it).
     Static so the bar scrolls away with content instead of eating the top. */
  .tabs{position:static;flex-wrap:wrap;overflow-x:visible;justify-content:center;gap:3px 4px;padding:5px clamp(8px,3vw,14px)}
  .tab-btn{padding:5px 9px;font-size:.74rem;min-height:30px;gap:4px;border-bottom-width:2px}
  .tab-btn .tab-icon{font-size:.92rem}
}