:root{
    --bg: #f6f7f9;
    --card:#ffffff;
    --ink:#111318;
    --muted:#6b7280;
    --accent:#12b886;           /* teal-ish */
    --accent-2:#2563eb;         /* blue for actions */
    --ring: rgba(18,184,134,.25);
    --radius:16px;
}
* { box-sizing: border-box }
/*body{
    margin:0; background:var(--bg); color:var(--ink);
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}*/
.sg-app{
    max-width: 480px; margin: 0 auto; min-height:100dvh; display:flex; flex-direction:column; font-size: 1rem;
}
/* Header / chrome */
.topbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg);
    border-bottom: 1px solid #e5e7eb;
    justify-content: space-between;
}
.iconbtn {
    min-width: 40px;
    height: 40px;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    /* display: grid; */
    /* place-items: center; */
    cursor: pointer;
    color: #999 !important;
    padding: 0;
}

.drawer h3 {
    font-size: 1.2rem !important;
    margin: 0;
    flex: 1;
    font-weight: 600 !important;
}

div#drawerClose {
    padding-left: 8px;
}
/*
.hamburger, .arrow{
    width:20px; height:2px; background:var(--ink); position:relative;
}
.hamburger:before, .hamburger:after{
    content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink);
}
.hamburger:before{ top:-6px } .hamburger:after{ top:6px }
.title{ font-weight:700; font-size:1.05rem; margin-left:.25rem; flex:1 }
*/
.focus-toggle {
font-size: .85rem;
color: var(--attain-primary-color) !important;
background: var(--attain-primary-color-20) !important;
border-color: var(--attain-primary-color) !important;
font-weight: 600;
padding: 0 10px;
width: 100px;
}
/* Progress pill + bar */
.blockpos{
    font-size:.8rem; color:#111; background:#eefbf6; border:1px solid #d6f4e6;
    padding:.25rem .5rem; border-radius:999px; display:inline-block; margin-right:.5rem;
}
.progress-wrap {
padding: .5rem 1rem;
position: relative;
width: -webkit-fill-available;
}
.sg-progress-bar {
    height: 10px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}
.sg-progress-bar > span{
    display:block; height:100%; width:0%; background:linear-gradient(90deg,#00d4ff, var(--attain-primary-color));
    transition:width .25s ease;
    /* width: calc(100vw - 165px); */
}

/* Content area */
.viewport{ position:relative; flex:1; display:flex; overflow:hidden }
.blocks{
    width:100%; display:flex; transition: transform .35s ease; touch-action: pan-y;
}
.block {
    min-width: 100%;
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.card {
    background: var(--card);
    border: 1px solid #eceff3;
    border-radius: var(--radius);
    padding: 1rem .9rem;
    width: 100%;
    box-shadow: 0 4px 12px rgba(17,19,24,.05);
    overflow: auto;
}
.card ol {
    padding: 0 0 0 15px;
    margin: 0;
}
.card ol li, .card ul li {
    margin-bottom: 10px;
}

.card ul.ticks li {
    margin-bottom: 10px;
    list-style: none;
    margin-left: -15px;
}
.card ul.ticks li::before {
    font-family: 'Material Symbols Outlined';
    content: 'check_small';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'opsz' 24;
    font-size: 1.61em;
    color: var(--attain-primary-color);
    position: absolute;
    margin-left: -33px;
    /* top: 0; */
    line-height: 1;
}
.card i.mso {
    color: var(--attain-primary-color);
    font-size: 1.3rem;
    vertical-align: text-bottom;
}

.summary-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: .8em;
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px;
    margin: 0 0 10px;
    gap: 10px;
}

.summary-meta p {
    display: flex;
    gap: 5px;
    align-items: flex-start;
}

.summary-meta i.mso {
    margin-top: -5px;
}

.attain-card.definition {
    padding: 20px 20px 60px 20px;
    background: var(--attain-secondary-color-lite);
    margin: 0 0 20px 0;
}

.attain-card.definition .card-header.term {
    font-size: 1.2rem;
    margin-bottom: .5rem;
}

.kicker{ text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--muted); margin-bottom:.25rem }
.h1{ font-size:1.35rem; font-weight:800; margin:.25rem 0 .5rem }
p{ margin:.35rem 0; color:#1f2937 }
.muted{ color:var(--muted) }

/* Visual placeholder */
.visual{
    height:180px; border:2px dashed #cbd5e1; border-radius:12px;
    display:grid; place-items:center; color:#64748b; margin:.5rem 0 0;
    background:
    linear-gradient(transparent 0 0) padding-box,
    repeating-linear-gradient(135deg,#f3f4f680,#f3f4f6 10px,#ffffff 10px,#ffffff 20px);
}

/* Recall choices */
.choices{ margin-top:.5rem; display:grid; gap:.5rem }
.choice{
    border:1px solid #e5e7eb; background:#fff; border-radius:12px; padding:.75rem;
    display:flex; gap:.75rem; align-items:flex-start; cursor:pointer;
}
.choice input{ margin: .25rem .25rem 0 .25rem; transform: scale(1.15) }
.choice.correct{ border-color:#22c55e; background:#f0fdf4 }
.choice.incorrect{ border-color:#ef4444; background:#fef2f2 }
.feedback{ font-size:.9rem; margin-top:.5rem; display:none }
.feedback.on{ display:block }

/* Bottom Nav */
.sg-nav {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
    background: var(--bg);
    position: sticky;
    bottom: -80px;
    z-index: 5;
    border-top: 1px solid #e5e7eb;
}
.btn {
    flex: 0 0 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px !important;
    height: 44px;
    cursor: pointer;
}

.btn.primary{color:#fff; border-color: transparent; }
.btn.primary:hover {
    color: #fff;
}
/*.btn.primary{ background: var(--accent); color:#fff; border-color: transparent; }*/
.btn:active{ transform: translateY(1px) }
.btn.primary.mark-complete{ box-shadow: 0 0 0 3px rgba(18,184,134,.18) inset !important; }
.btn.primary.mark-complete.completed {
    font-weight: 700;
    background: var(--attain-primary-color);
}

/* Outline drawer (off-canvas) */
.drawer{
    position:fixed; inset:0 30% 0 0; max-width:420px; width:86vw; background:#fff; z-index:20;
    transform: translateX(-100%); transition: transform .3s ease; box-shadow: 8px 0 24px rgba(0,0,0,.12);
    border-right:1px solid #e5e7eb; display:flex; flex-direction:column;
}
.drawer.open{ transform: translateX(0) }
.drawer .hd{ padding:1rem; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; gap:.5rem }
.drawer h3{ font-size:1rem; margin:0; flex:1; font-weight: 700;}
.outline{ padding:.25rem .5rem 1rem; overflow:auto }
.outline button {
width: 100% !important;
text-align: left !important;
background: transparent !important;
border: 0 !important;
padding: .65rem .75rem !important;
border-radius: 10px !important;
cursor: pointer;
color: #111 !important;
font-size: 1rem !important;
white-space: normal;
}
.outline button.active{ background:#eefbf6 !important; outline:2px solid var(--ring) !important; }

/* Focus Mode */
.focus .topbar, .focus .sg-nav, .focus .progress-wrap{ display:none }
.focus .card{ box-shadow:none; border-color:#e5e7eb }

/* Focus Mode escape button */
.focus-exit{
  position:fixed; right:12px; top:12px; z-index:40;
  display:none; align-items:center; gap:.4rem;
  height:40px; padding:0 .8rem;
  border-radius:999px; border:1px solid #cfe0ff;
  background:#eaf1ff; color:#2563eb; font-weight:600; cursor:pointer;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.focus .focus-exit{ display:flex; }  /* only visible in Focus Mode */

/* keeps elements with this class scrollable + hints browser to handle horizontal pan */
/* Viewport: prefer vertical pan; don't chain horizontal overscroll to parent */
/* Viewport prefers vertical pan and contains horizontal overscroll */
#viewport{
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

/* Guard: let BOTH axes pan, but only contain horizontal overscroll */
.x-scroll-guard{
  overflow-x: auto;                 /* horizontal scroll for wide tables */
  -webkit-overflow-scrolling: touch;
  touch-action: auto;               /* or: pan-x pan-y */
  overscroll-behavior-x: contain;   /* stop horizontal chain to parent (prevents swipe) */
  overscroll-behavior-y: auto;      /* ALLOW vertical chain to page */
  /* do NOT set overflow-y here unless you want an inner vertical scroller */
}




/* Desktop niceties */
@media (min-width: 600px){
    .h1{ font-size:1.5rem }
    .visual{ height:220px }
    .btn{ flex:1 }
}