/* YG365 Assessments Spec — Dark/Light, Cards, Modal, Grid */
:root{
  --yg-bg:#ffffff; --yg-fg:#0f172a; --yg-muted:#64748b;
  --yg-card:#ffffff; --yg-bord:#e5e7eb;
  --yg-accent:#2563eb; --yg-accent-fg:#ffffff;
  --yg-success:#16a34a;
  --yg-coach-bg:#f8fafc; --yg-coach-bord:#e2e8f0;
  --yg-shadow: 0 1px 2px rgba(0,0,0,.04);
  --yg-ring: 0 0 0 3px rgba(37,99,235,.25);
}
@media (prefers-color-scheme: dark){
  :root{
    --yg-bg:#0b0d10; --yg-fg:#e5e7eb; --yg-muted:#94a3b8;
    --yg-card:#111418; --yg-bord:#242a31;
    --yg-accent:#60a5fa; --yg-accent-fg:#0b0d10;
    --yg-success:#34d399;
    --yg-coach-bg:#0f1720; --yg-coach-bord:#1f2937;
    --yg-shadow: 0 1px 2px rgba(0,0,0,.35);
    --yg-ring: 0 0 0 3px rgba(96,165,250,.35);
  }
}
.yg-wrap{display:grid;gap:1rem;grid-template-columns:1fr;align-items:start;color:var(--yg-fg)}
@media(min-width:1024px){.yg-wrap{grid-template-columns:1fr 3fr}}
@media(min-width:1280px){.yg-wrap{grid-template-columns:1fr 4fr}}
.yg-left .yg-h,.yg-right .yg-h{margin:.25rem 0 .5rem}
.yg-head-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}
.yg-head-row .yg-btn{margin-left:auto}
.yg-card{background:var(--yg-card);border:1px solid var(--yg-bord);border-radius:12px;padding:12px;box-shadow:var(--yg-shadow)}
.yg-assess-list{position:sticky;top:12px;display:flex;flex-direction:column;gap:.5rem}
.yg-assess-item{display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--yg-bord);background:var(--yg-card);cursor:pointer;text-align:left}
.yg-assess-item:hover{border-color:var(--yg-accent)}
.yg-assess-item.active{outline:2px solid var(--yg-accent);outline-offset:1px}
.yg-assess-item:focus-visible{outline:none;box-shadow:var(--yg-ring)}
.yg-assess-meta{margin-left:auto;font-size:12px;color:var(--yg-muted)}
.yg-pill{color:var(--yg-success);font-weight:600}

/* Coach Picks grid */
.yg-picks{display:grid;gap:1rem}
@media(min-width:640px){.yg-picks{grid-template-columns:repeat(2,1fr)}}
/* CHANGED: 4 columns on desktop */
@media(min-width:1280px){.yg-picks{grid-template-columns:repeat(4,1fr)}}

.yg-pick{background:var(--yg-coach-bg);border:1px solid var(--yg-coach-bord);border-radius:12px;overflow:hidden;position:relative}
.yg-pick .thumb{aspect-ratio:16/9;background:#000;background-position:center;background-size:cover}
.yg-pick .cnt{padding:.75rem}
.yg-badge{display:inline-block;font-size:11px;border:1px solid var(--yg-bord);padding:.15rem .45rem;border-radius:999px;margin-bottom:.25rem;color:var(--yg-muted)}
.yg-avatars{position:absolute;top:8px;right:8px;display:flex;gap:6px}
.yg-avatars .av{width:28px;height:28px;border-radius:50%;border:2px solid var(--yg-card);background:#999}
.yg-btn{padding:.55rem .9rem;border-radius:10px;border:1px solid var(--yg-bord);background:var(--yg-card);color:var(--yg-fg);cursor:pointer}
.yg-btn:hover{border-color:var(--yg-accent)}
.yg-btn.primary{background:var(--yg-accent);color:var(--yg-accent-fg);border-color:var(--yg-accent)}
.yg-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:1000}
.yg-modal{position:fixed;inset:10% 50% auto 50%;transform:translate(-50%,0);max-width:1100px;width:92%;background:var(--yg-card);color:var(--yg-fg);border:1px solid var(--yg-bord);border-radius:14px;display:none;z-index:1001;max-height:80vh;overflow:auto}
.yg-modal header,.yg-modal footer{position:sticky;background:var(--yg-card);padding:.75rem;border-bottom:1px solid var(--yg-bord);top:0}
.yg-modal footer{bottom:0;top:auto;border-top:1px solid var(--yg-bord);display:flex;gap:.5rem;justify-content:flex-end}
.yg-modal .body{padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.yg-x{margin-left:auto;cursor:pointer}
.yg-q{padding:.75rem;border:1px solid var(--yg-bord);border-radius:10px}
.yg-q h4{margin:.1rem 0 .25rem}
.yg-q p{margin:.1rem 0 .25rem;color:var(--yg-muted);font-size:14px}
.yg-scale{display:flex;gap:.5rem;flex-wrap:wrap}
.yg-scale label{border:1px solid var(--yg-bord);padding:.25rem .5rem;border-radius:8px;cursor:pointer}

/* Admin helpers */
.yg-row-head{display:flex;align-items:center;gap:.5rem;justify-content:space-between;margin-bottom:.25rem}
.yg-row-head .handle{cursor:move}
.yg-flex{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}

/* Admin accordion polish */
.yg-row{border:1px solid var(--yg-bord); border-radius:12px; margin-bottom:.75rem; background:var(--yg-card)}
.yg-row-head{display:flex;align-items:center;gap:.5rem;justify-content:flex-start;padding:.4rem .6rem;border-bottom:1px solid var(--yg-bord)}
.yg-row-head .handle{cursor:move}
.yg-row-head .yg-acc-toggle{
  width:28px;height:28px;border-radius:8px;border:1px solid var(--yg-bord);background:var(--yg-card);cursor:pointer;position:relative;
}
.yg-row-head .yg-acc-toggle::before{
  content:"";border-style:solid;border-width:6px 4px 0 4px;border-color:var(--yg-fg) transparent transparent transparent;
  position:absolute;top:10px;left:9px;transition:transform .15s ease;
}
.yg-row.collapsed .yg-row-head .yg-acc-toggle::before{ transform:rotate(-90deg) translateX(-1px); transform-origin:center; }
.yg-row-title{margin-left:.25rem;margin-right:auto;cursor:pointer}
.yg-row-actions .yg-btn-danger{border-color:#ef4444}
.yg-row-body{padding:.75rem;display:block}
.yg-row.collapsed .yg-row-body{display:none}
.yg-row-head { cursor: default; }
.yg-row-title { cursor: pointer; user-select: none; }
.yg-acc-toggle { cursor: pointer; }

/* Questions as tabs */
.yg-tabs { border:1px solid var(--yg-bord); border-radius:12px; background:var(--yg-card); }
.yg-tabs-nav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; padding:.5rem; border-bottom:1px solid var(--yg-bord); margin:0; list-style:none; }
.yg-tabs-nav .yg-tab { display:flex; align-items:center; gap:6px; padding:.25rem .5rem; border:1px solid var(--yg-bord); border-radius:999px; background:var(--yg-card); }
.yg-tabs-nav .yg-tab .handle { cursor:move; }
.yg-tabs-nav .yg-tab .yg-tab-label { background:none; border:0; padding:0; cursor:pointer; color:var(--yg-fg); }
.yg-tabs-nav .yg-tab .yg-tab-close { background:none; border:0; font-size:18px; line-height:1; cursor:pointer; color:var(--yg-muted); }
.yg-tabs-nav .yg-tab-add { margin-left:auto; }

.yg-tabs-panels { padding:.75rem; }
.yg-tab-panel { border:1px solid var(--yg-bord); border-radius:10px; margin-bottom:.75rem; background:var(--yg-card); }
.yg-tab-panel.collapsed .yg-tab-body { display:none; }
.yg-tab-header { display:flex; align-items:center; gap:.5rem; padding:.6rem .7rem; border-bottom:1px solid var(--yg-bord); }
.yg-tab-header .spacer { margin-left:auto; }
.yg-row-title { cursor:pointer; user-select:none; }
.yg-tab-toggle { cursor:pointer; }

/* Empty state shell on courses without assessments */
.yg365-assessments.is-empty { grid-template-columns: 1fr; }
.yg365-assessments.is-empty .yg-empty { text-align:center; padding:1rem 1.25rem; }
.yg365-assessments.is-empty .yg-empty .yg-empty-sub { color: var(--yg-muted); margin-top:.25rem; font-size: 0.95rem; }

/* Assessment cards styled like course cards */
.yg-assess-list{display:grid;gap:1rem}
@media(min-width:640px){.yg-assess-list{grid-template-columns:1fr}}
@media(min-width:1024px){.yg-assess-list{grid-template-columns:1fr}}

.yg-assess-card{padding:0;overflow:hidden;border-radius:16px}
.yg-assess-card .thumb{
  aspect-ratio:16/9;
  background:#111;
  background-position:center;background-size:cover;position:relative;
}
.yg-assess-card .status{
  position:absolute;top:10px;left:10px;
  padding:.25rem .55rem;border-radius:999px;font-weight:600;font-size:12px;
  background:#f59e0b;color:white;border:0;
}
.yg-assess-card .status.completed{ background:#10b981; }
.yg-assess-card .status.pending{ background:#6b7280; }

.yg-assess-card .body{padding:.9rem}
.yg-assess-card .chip{
  display:inline-block;font-size:12px;padding:.15rem .5rem;border-radius:999px;
  border:1px solid var(--yg-bord);color:var(--yg-muted);margin-bottom:.35rem;
}
.yg-assess-card .title{margin:.2rem 0 .3rem}
.yg-assess-card .muted{color:var(--yg-muted);margin:.1rem 0 .75rem;min-height:0}
.yg-assess-card .actions{display:flex;gap:.5rem;align-items:center}

.yg-btn.outline{
  background:transparent;border:1px solid var(--yg-bord);
}

/* Intro block in modal */
.yg-intro{
  background:var(--yg-card);
  border:1px solid var(--yg-bord);
  border-radius:12px;
  padding:.9rem;
  margin-bottom:.9rem
}
.yg-intro h3{margin:.1rem 0 .35rem 0;font-size:1.05rem}
.yg-intro p{margin:0;color:var(--yg-muted);font-size:.9rem}

/* Questions grid: 1 col mobile, 2 cols at ≥1024px, 4 cols at ≥1280px */
.yg-questions-grid{display:grid;grid-template-columns:1fr;gap:.75rem}
@media(min-width:1024px){ .yg-questions-grid{grid-template-columns:repeat(2,1fr)} }
/* CHANGED: 4 columns on desktop */
@media(min-width:1280px){ .yg-questions-grid{grid-template-columns:repeat(4,1fr)} }

.yg-qcard{
  border:1px solid var(--yg-bord);
  background:var(--yg-card);
  border-radius:12px;
  padding:.9rem
}
.yg-qcard h4{margin:.1rem 0 .25rem 0;font-size:1rem}
.yg-qcard .hint{margin:0 0 .5rem 0;color:var(--yg-muted);font-size:.9rem}

/* Large, clean radio controls aligned with text */
.yg-qcard .choices{display:flex;flex-wrap:wrap;gap:.5rem .9rem}
.yg-choice{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none}
.yg-choice input{position:absolute;opacity:0;pointer-events:none}
.yg-choice .dot{
  width:18px;height:18px;border-radius:999px;
  border:2px solid var(--yg-bord);display:inline-block;position:relative;flex:0 0 18px
}
.yg-choice .txt{font-size:.95rem;color:var(--yg-fg);line-height:1}
.yg-choice:hover .dot{border-color:var(--yg-accent)}
.yg-choice input:checked + .dot{border-color:var(--yg-accent)}
.yg-choice input:checked + .dot::after{
  content:"";position:absolute;inset:3px;border-radius:999px;background:var(--yg-accent)
}

/* Hide footer buttons when viewing a resource (video/pdf/image) */
.yg-modal.is-viewer footer{ display:none !important; }

/* Buttons: grey fill + darker grey border (scoped to the assessments UI) */
.yg365-assessments .yg-btn,
.yg365-assessments button,
.yg365-assessments .button {
  background: #f0f0f0;          /* light grey */
  border: 1px solid #9aa0a6;     /* darker grey border */
  color: #1f2937;                /* dark text for contrast */
  border-radius: 8px;
  padding: 8px 12px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Hover/active/focus states */
.yg365-assessments .yg-btn:hover,
.yg365-assessments button:hover,
.yg365-assessments .button:hover {
  background: #e5e7eb;          /* a touch darker grey */
  border-color: #80868b;         /* darker on hover */
}

.yg365-assessments .yg-btn:active,
.yg365-assessments button:active,
.yg365-assessments .button:active {
  background: #dfe3e7;
  border-color: #6b7280;
}

.yg365-assessments .yg-btn:focus-visible,
.yg365-assessments button:focus-visible,
.yg365-assessments .button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 41, 55, 0.25); /* accessible focus ring */
}

/* Darker text for badges/pills */
.yg365-assessments .yg-badge {
  color: #1f2937;           /* darker grey */
  border-color: #9aa0a6;    /* keep a slightly darker border */
  background: #f3f4f6;      /* optional: subtle light grey fill */
}

/* Force assessment chip to match .yg-badge */
body.single-lessons .yg365-assessments .yg-card .chip,
body.single-lessons .yg365-assessments .chip,
body.single-lessons .yg-assess-list .chip,
body.single-lessons .chip.chip,
body.single-lessons .chip {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: .15rem .45rem !important;
  border-radius: 999px !important;
  margin-bottom: .25rem !important;

  border: 1px solid var(--yg-bord, #e2e8f0) !important;
  color: var(--yg-muted, #64748b) !important;
  background: transparent !important;

  height: auto !important;
  line-height: 1.2 !important;
  font-variant-numeric: normal !important;
  align-items: initial !important;
  justify-content: initial !important;
}

/* Normalize assessment card titles to 20px / 800, tight leading, dark text */
.yg365-assessments .yg-assess-card .title,
.yg365-assessments .yg-card .title {
  margin: 0;                 /* override previous margins */
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: #111827;
  /* reset any block margins some themes inject */
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Add a bit of breathing room under picks titles */
.yg365-assessments .yg-picks .yg-card h4,
.yg365-assessments .yg-picks h4 {
  margin: 0 0 0.5rem;   /* bottom spacing ~8px */
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  color: #111827;
}

/* --- Layout: assessments on top (4 cols), picks below (4 cols) --- */
.yg365-assessments {
  display: block;
}

/* Headings */
.yg365-assessments .yg-left .yg-h,
.yg365-assessments .yg-right .yg-h {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: #111827;
}

/* Assessments grid (4 cols) */
.yg365-assessments .yg-assess-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px; /* spacing before picks section */
}

/* Picks section — sits below assessments */
.yg365-assessments .yg-right {
  margin-top: 0;
}

/* Picks grid (force 4 cols, override any inline grid from other scripts) */
.yg365-assessments .yg-picks {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
.yg365-assessments .yg-picks[style] {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Hide the entire Coach Picks section when there are no pick cards */
.yg365-assessments .yg-right.is-hidden { display: none; }

/* Bonus: if :has is supported, do it with pure CSS too */
@supports selector(.x:has(.y)) {
  .yg365-assessments .yg-right:not(:has(.yg-pick)) { display: none; }
}

/* Responsive */
@media (max-width: 1200px) {
  .yg365-assessments .yg-assess-list,
  .yg365-assessments .yg-picks {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 800px) {
  .yg365-assessments .yg-assess-list,
  .yg365-assessments .yg-picks {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 520px) {
  .yg365-assessments .yg-assess-list,
  .yg365-assessments .yg-picks {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Assessment modal: hidden by default, shown when body has .yg-modal-open ===== */

/* default: keep both hidden */
#yg-modal{ display:none !important; }
#yg-backdrop{ display:none !important; }

/* show only when we toggle the body class from JS */
body.yg-modal-open #yg-modal{ display:flex !important; }
body.yg-modal-open #yg-backdrop{ display:block !important; }

/* theme tokens (safe fallbacks) */
:root{
  --yg-bg:     #f8fafc;
  --yg-card:   #ffffff;
  --yg-text:   #0f172a;
  --yg-muted:  #64748b;
  --yg-bord:   #e5e7eb;
  --yg-accent: #111827;
}

/* shell */
#yg-modal{
  width: min(96vw, 1100px);
  max-height: 92vh;
  background: var(--yg-card,#fff);
  color: var(--yg-text,#0f172a);
  border-radius: 14px;
  overflow: hidden;                 /* clip rounded corners */
  display: flex;                    /* column layout; body will scroll */
  flex-direction: column;
}

/* header / footer */
#yg-modal header{
  flex: 0 0 auto;
  padding: 12px 16px;
  border-bottom: 1px solid var(--yg-bord,#e5e7eb);
  background: var(--yg-card,#fff);
}
#yg-modal footer{
  flex: 0 0 auto;
  padding: 12px 16px;
  border-top: 1px solid var(--yg-bord,#e5e7eb);
  background: var(--yg-card,#fff);
  position: sticky;
  bottom: 0;
  z-index: 2;
}

/* the ONLY scroll area */
#yg-modal .body{
  flex: 1 1 auto;
  min-height: 0;                    /* <<< allows scrolling in flex */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  padding-bottom: 96px;             /* content clears sticky footer */
  background: var(--yg-bg,#f8fafc);
}
#yg-modal.is-viewer .body{ padding-bottom:16px; }

/* intro card */
#yg-modal .yg-intro{
  padding: 14px 16px;
  border: 1px solid var(--yg-bord,#e5e7eb);
  border-radius: 12px;
  background: var(--yg-card,#fff);
  margin-bottom: 16px;
}
#yg-modal .yg-intro h3{
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--yg-text,#0f172a);
}
#yg-modal .yg-intro p{
  margin: 0;
  font-size: 13px;
  color: var(--yg-muted,#64748b);
}

/* single-column questions, with auto numbers */
#yg-modal .yg-questions-grid{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  counter-reset: qnum;
}
#yg-modal .yg-qcard{
  position: relative;
  padding: 16px 16px 14px 64px;     /* space for badge */
  border: 1px solid var(--yg-bord,#e5e7eb);
  border-radius: 12px;
  background: var(--yg-card,#fff);
}
#yg-modal .yg-qcard::before{
  counter-increment: qnum;
  content: counter(qnum);
  position: absolute;
  left: 16px; top: 16px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--yg-accent,#111827);
  color: #fff; font-weight: 700; font-size: 14px; line-height: 32px;
  text-align: center;
}
#yg-modal .yg-qcard h4{
  margin: 0 0 6px;
  font-size: 18px; font-weight: 700; color: var(--yg-text,#0f172a);
}
#yg-modal .yg-qcard .hint{
  margin: 0 0 12px;
  font-size: 13px; color: var(--yg-muted,#64748b); line-height: 1.45;
}

/* large radio "pills", text stays on one line */
#yg-modal .yg-qcard .choices{
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px 14px;
}
@media (max-width: 720px){ #yg-modal .yg-qcard .choices{ grid-template-columns: 1fr; } }
#yg-modal .yg-qcard .yg-choice{
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 14px; min-height: 44px;
  border: 1.5px solid var(--yg-bord,#e5e7eb);
  border-radius: 12px; background: var(--yg-card,#fff);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, background .15s, color .15s;
}
#yg-modal .yg-qcard .yg-choice:hover{
  border-color: #cbd5e1;
  box-shadow: 0 1px 0 rgba(15,23,42,.04);
}
/* hide native radio, show custom dot */
#yg-modal .yg-qcard .yg-choice input{
  position: absolute; opacity: 0; pointer-events: none;
}
#yg-modal .yg-qcard .yg-choice .dot{
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%; border: 2px solid #9ca3af;
  background: var(--yg-card,#fff);
  box-shadow: inset 0 0 0 0 var(--yg-accent,#111827);
  transition: box-shadow .15s, border-color .15s, background .15s;
}
#yg-modal .yg-qcard .yg-choice input:checked + .dot{
  border-color: var(--yg-accent,#111827);
  box-shadow: inset 0 0 0 6px var(--yg-accent,#111827);
}
#yg-modal .yg-qcard .yg-choice .txt{
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--yg-text,#0f172a); font-size: 14px; font-weight: 600;
}

/* footer buttons */
#yg-cancel.yg-btn{ background:#f1f5f9; border:1px solid #cbd5e1; color: var(--yg-text,#0f172a); }
#yg-save.yg-btn.primary{ background: var(--yg-accent,#111827); border-color: var(--yg-accent,#111827); color:#fff; }

/* backdrop */
#yg-backdrop{ background: rgba(15,23,42,.45); }

/* dark mode (system) */
@media (prefers-color-scheme: dark){
  :root{
    --yg-bg:#0b1220; --yg-card:#0f172a; --yg-text:#e5e7eb; --yg-muted:#94a3b8; --yg-bord:#1f2937; --yg-accent:#cbd5e1;
  }
  #yg-modal .yg-qcard .yg-choice:hover{ box-shadow: 0 1px 0 rgba(2,6,23,.5); }
  #yg-cancel.yg-btn{ background:#111827; border-color:#334155; color:#e5e7eb; }
}

/* dark mode (class / data-theme) */
.dark :root, [data-theme="dark"] :root{
  --yg-bg:#0b1220; --yg-card:#0f172a; --yg-text:#e5e7eb; --yg-muted:#94a3b8; --yg-bord:#1f2937; --yg-accent:#cbd5e1;
}
.dark #yg-cancel.yg-btn, [data-theme="dark"] #yg-cancel.yg-btn{
  background:#111827; border-color:#334155; color:#e5e7eb;
}

/* === Modal height tweak for desktop === */
@media (min-width: 1024px){
  #yg-modal{
    max-height: 84vh;                 /* was 92vh; gives more breathing room */
  }
  #yg-modal header,
  #yg-modal footer{
    padding: 10px 14px;               /* slightly tighter chrome */
  }
  #yg-modal .body{
    padding-bottom: 72px;             /* footer clearance, a bit less than before */
  }
}

/* Account for devices with bottom safe-area (iOS) */
#yg-modal .body{
  padding-bottom: max(72px, env(safe-area-inset-bottom));
}

/* (Optional) If the WP admin bar is visible on the front-end */
body.admin-bar #yg-modal{
  max-height: calc(84vh - 32px);
}

/* Number badge on each question */
#yg-modal .yg-qcard::before{
  background: #071e3b !important;
}

/* Selected radio “dot” */
#yg-modal .yg-qcard .yg-choice input:checked + .dot{
  border-color: #071e3b !important;
  box-shadow: inset 0 0 0 6px #071e3b !important;
}

/* Save button */
#yg-save.yg-btn.primary{
  background: #071e3b !important;
  border-color: #071e3b !important;
  color: #fff !important;
}
#yg-save.yg-btn.primary:hover{
  filter: brightness(1.05);
}

/* ============ Mobile polish & overflow fixes ============ */

/* Let things shrink instead of forcing horizontal scroll */
#yg-modal,
#yg-modal * { box-sizing: border-box; }
#yg-modal .body { overflow-x: hidden; }
#yg-modal .yg-questions-grid,
#yg-modal .yg-qcard,
#yg-modal .yg-qcard .choices,
#yg-modal .yg-qcard .choices .yg-choice { min-width: 0; }

/* Keep answer text on one line but allow it to ellipsize safely */
#yg-modal .yg-qcard .yg-choice { 
  max-width: 100%;
  width: 100%;
}
#yg-modal .yg-qcard .yg-choice .txt{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Smaller badges & comfy padding on small screens */
@media (max-width: 640px){

  /* Modal size: a bit shorter and tighter on mobile */
  #yg-modal{
    width: 96vw;
    max-height: 88dvh;                 /* was taller; bring it up so footer is comfy */
  }

  /* Body scroll area: extra bottom padding so buttons never collide */
  #yg-modal .body{
    padding: 12px;
    padding-bottom: 72px;              /* footer clearance */
  }

  /* Footer buttons spacing */
  #yg-modal footer{
    padding: 10px 12px;
  }

  /* Question card spacing */
  #yg-modal .yg-qcard{
    padding: 14px 12px 12px 56px;      /* tighter right/left on mobile */
  }

  /* Number badge a bit smaller */
  #yg-modal .yg-qcard::before{
    left: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    font-size: 13px;
  }

  /* Choice grid → 1 column on phones */
  #yg-modal .yg-qcard .choices{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* Bigger tap targets but not too wide */
  #yg-modal .yg-qcard .yg-choice{
    padding: 12px;
  }

  /* Radio dot slightly smaller for balance */
  #yg-modal .yg-qcard .yg-choice .dot{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    box-shadow: inset 0 0 0 0 var(--yg-accent, #071e3b);
  }
  #yg-modal .yg-qcard .yg-choice input:checked + .dot{
    box-shadow: inset 0 0 0 5px var(--yg-accent, #071e3b);
  }
}

/* Also cap the desktop modal a touch more so buttons don’t flirt with the edge */
@media (min-width: 641px){
  #yg-modal{ max-height: 90dvh; }      /* down from 92–96; gives footer some air */
  #yg-modal .body{ padding-bottom: 84px; }
}

/* ===== Vertical offsets so modal clears bottom alerts ===== */

/* Tune these two to taste */
:root{
  --yg-top-offset: 6vh;      /* start a bit lower from the very top (you said you have room) */
  --yg-bottom-gutter: 88px;  /* space to leave above your alerts icon at the bottom */
}

/* On phones, leave even more bottom room */
@media (max-width: 640px){
  :root{
    --yg-top-offset: 5vh;
    --yg-bottom-gutter: 95px;
  }
}

/* Anchor the modal from the TOP instead of dead-center, and cap its height
   so it never touches the alerts area */
#yg-modal{
  position: fixed !important;
  top: var(--yg-top-offset) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;      /* horizontal centering only */
  max-height: calc(100dvh - var(--yg-top-offset) - var(--yg-bottom-gutter)) !important;
  width: min(96vw, 1100px);
}

/* Make the backdrop cover the screen (if not already) */
#yg-backdrop{
  position: fixed !important;
  inset: 0 !important;
}

/* Ensure the scroll area inside still has clearance for the sticky footer */
#yg-modal .body{
  padding-bottom: max(84px, calc(56px + 16px)); /* content clears footer buttons */
}

/* If you want a tad more breathing room on desktop */
@media (min-width: 1024px){
  #yg-modal{
    max-height: calc(100dvh - var(--yg-top-offset) - var(--yg-bottom-gutter) - 8px) !important;
  }
}

/* Mobile: make description text bigger + darker */
@media (max-width: 640px){
  /* Question descriptions inside the modal */
  #yg-modal .yg-qcard .hint{
    font-size: 15px;                 /* was 13px */
    color: var(--yg-text, #0f172a);  /* darker */
    line-height: 1.55;
  }

  /* Optional: descriptions under cards (outside the modal) */
  .yg-assess-card .muted,
  .yg-pick .cnt .desc{
    font-size: 15px;
    color: var(--yg-text, #0f172a);
    line-height: 1.55;
  }
}