/*  GENERAL LAYOUT  (mobile-landscape first)  */
html,body {margin:0;height:100%;font:16px/1.4 "Nunito",sans-serif;
  background:#f5f7fa;color:#3A3B3C;overflow:hidden}
.page {
  position:fixed;inset:0;padding:20px;
  display:none;                     /* ← hide by default           */
  flex-direction:column;align-items:center;justify-content:center;
  background:#f5f7fa;color:#3A3B3C;
    /* legacy iOS support: */
    padding-top:    constant(safe-area-inset-top);
    padding-right:  constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left:   constant(safe-area-inset-left);
  
    /* modern: */
    padding-top:    env(safe-area-inset-top);
    padding-right:  env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
}

@media screen and (max-width: 640px) and (orientation: landscape) {
  header, footer {
    display: none;
  }
}


.page.active {
  display:flex;                     /* ← only current page shows   */
  animation:fadeIn .35s both;       /* subtle fade                 */
}

@keyframes fadeIn {from{opacity:0}to{opacity:1}}
.trainer     {background:#000}

/*  COMPONENTS  */
.logo {width:140px;margin-bottom:14px}
h1,h2 {text-align:center;margin:.4em 0;font-weight:700}
h2 {
  font-size: 1.3rem;    /* e.g. 20px if root is 16px */
  line-height: 1.3;      /* tighten up the spacing */
}
p {
  font-size: 1rem;    /* e.g. 20px if root is 16px */
  line-height: 1.1;      /* tighten up the spacing */
}

p  {text-align:center;margin:.2em 0 .8em}
button {font:600 1.5rem/2 inherit;padding:1em 1.2em;border:0;
border-radius:10px;cursor:pointer;display:block;
width:100%;margin:.4em 0;box-shadow:0 2px 6px #0002;
background:#fff;color:#222;transition:transform .05s}
button:active {transform:scale(.96)}
.primary {background:#1cbf73;color:#fff}
.choices {width:100%;max-width:440px}
.trainer video, .trainer canvas {position:absolute;inset:0;width:100%;height:100%}
#banner {z-index:30}

/* === HUD PANEL ======================================================= */
.hud {
  position:absolute;top:0;right:0;height:100%;width:30%;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:12px 16px;box-sizing:border-box;
  background:rgba(255,255,255,.92);          /* light panel over video   */
  backdrop-filter:blur(6px);
  border-left:1px solid #0002;box-shadow:-2px 0 8px #0002;
  transition:transform .4s ease, opacity .3s ease;
}

.hud.hidden      {transform:translateX(100%);opacity:0;pointer-events:none}
.hud header      {display:flex;justify-content:space-between;align-items:center}
#hud-close       {background:none;border:0;font-size:1.4rem;line-height:1;
                  cursor:pointer}
.big             {font-size:1.05rem;margin:0 0 1em}
footer           {text-align:right}
footer .primary  {padding:.6em 1.2em}

@media (max-aspect-ratio: 4/3) {      /* portrait or narrow landscape  */
  .hud {width:100%;height:auto;bottom:0;top:auto;
        flex-direction:row;align-items:center;
        padding:8px 12px;border-left:0;border-top:1px solid #0002}
  .big{flex:1;margin:0 1em 0 0}
  header{display:none}
} 

/* === INSTRUCTION DECK =============================================== */
.deck        {background:#fff;color:#222;padding:0;display:flex;flex-direction:row}
.hidden      {display:none}
/* ---------- Deck two-column layout ---------------------------------*/
.deck            {display:flex;height:100%;}
#deck-body       {
  flex:0 0 30%;
  min-width:300px;
  overflow:auto;
  padding-top: calc(env(safe-area-inset-top, 0));
  padding-left: calc(env(safe-area-inset-left, 0));
  padding-bottom: calc(env(safe-area-inset-bottom, 0));
}
#deck-side{
  flex:1 1 70%;
  display:flex;
  flex-direction:column;
  max-height:100vh;       /* ← NEW: never taller than the viewport   */
  overflow:hidden;        /* hides anything that would spill outside */
  padding-right: env(safe-area-inset-right, 0);
  padding-left: env(safe-area-inset-left, 0);
  box-sizing: border-box;
}

/* ---------- Make the Sketchfab pane fill #deck-side ----------------*/
#deck-side,
.sketchfab-embed-wrapper,
.sketchfab-embed-wrapper iframe {
  width:100%;
  height:100%;          /* full vertical space */
  border:0;
}

.deck-footer {
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:#f3f5f6;
  box-shadow:0 -1px 4px #0001;
}
/* progress bar inside left column */
progress.audio-bar {
  flex: 0 0 auto;        /* prevent it from flexing away */
  width: 80%;
  max-width: 420px;
  align-self: center;
  height: 12px;
  margin: 22px 0 10px;
  border-radius: 7px;
  background: #c5c5c5;
  border: 1px solid #999;
  -webkit-appearance: none;
  appearance: none;
}

progress.audio-bar::-webkit-progress-bar    {background:#ddd;border-radius:6px;}
progress.audio-bar::-webkit-progress-value{
  background:#6F2DA8  ;          /* solid brand-green */
  border-radius:7px;
  transition:width .3s linear;
}
/* (optional) Firefox */
progress.audio-bar::-moz-progress-bar       {background:#1cbf73;border-radius:6px;}

/* footer now has only buttons – tighten gap a bit if you like */
.deck-footer {gap:8px;}



/* make the bar stand out */
progress        {flex:1;height:12px;border:0;background:#ddd;border-radius:6px;}
progress::-webkit-progress-bar    {background:#ddd;border-radius:6px;}
progress::-webkit-progress-value  {background:#1cbf73;border-radius:6px;}

button#deck-prev {visibility:hidden}                /* hidden on first step */

@media(max-aspect-ratio:4/3){           /* portrait → model on top */
  .deck       {flex-direction:column}
  #deck-side  {width:100%;min-width:0;border-left:0;border-bottom:1px solid #0001}
}

/* make your “side” pane flex‐center its contents */
.step-side {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* any image you drop into that pane will now scale down to fit */
.step-side img {
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;       /* removes any inline‐img whitespace */
}

/* responsive video container */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 640px;    /* whatever maximum width you want */
  margin: 0 auto;      /* centers it horizontally */
  padding-top: 56.25%; /* 16∶9 aspect ratio */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* camera container fills the screen */
.camera-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* video covers the container */
#camera-stream {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* canvas for detection sits over the video but under the text-overlay */
.overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  z-index: 1000;
}

.overlay-text {
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 10px 0; /* explicitly add spacing below text */
}

.overlay-image {
  width: 400px;
  height: auto;
}

.trainer #video,
.trainer #overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}



/* ——————————————————————————————————————————————————————————————————————————
   HOME PAGE LAYOUT REVAMP
   • logo top-left
   • centered “Welcome back!”
   • three equal-height cards
   • responsive text
   • no scrolling
   —————————————————————————————————————————————————————————————————————————— */

/* Container: full viewport, no scroll, vertical stack */
#home.page.active {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom); /* safe-area explicitly included */
  box-sizing: border-box;

}

/* Grid: header auto, cards fill remaining space */
#home.page.active .home-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);     /* 3 equal tracks */
  column-gap: clamp(1rem, 2vw, 2rem);        /* responsive gutter */
  padding-inline: clamp(1rem, 2vw, 2rem);    /* same on left/right */

  grid-template-rows: auto 1fr;
  gap: 1rem;
  padding: 1rem;
  height: calc(100% - 3rem);
  align-items: stretch;
  box-sizing: content-box;
  padding: 2rem 1rem 3rem;   /* extra bottom padding lifts cards off the edge */
  max-height: 330px;       /* card never wider than 450px */

}

/* Logo: absolute top-left, out of flow */
#home.page.active .logo {
  position: absolute;
  top: 0rem;
  left: 1rem;
  width: clamp(80px, 15vw, 140px);
  height: auto;
  z-index: 0;
}

/* Header: spans full width, centered, sits below logo */
#home.page.active .home-header {
  grid-column: 1 / -1;
  margin: clamp(0rem, 1vw, 1.5rem) 0 clamp(0rem, 1vw, 1.5rem);
  text-align: center;
}
#home.page.active .home-header h1 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.2;
}

/* Cards row: each card fills its grid cell top-to-bottom */
#home.page.active .home-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* Responsive typography inside cards */
#home.page.active .home-col h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(1rem, 4vw, 1.5rem);
}
#home.page.active .home-col p,
#home.page.active .home-col .button {
  margin: 0.5rem 0;
  font-size: clamp(0.875rem, 3.5vw, 1rem);
}

/* Buttons: center and scale */
#home.page.active .home-col .button {
  align-self: center;
  padding: 0.75rem 1.5rem;
  font-size: clamp(0.875rem, 3.5vw, 1rem);
}

#home.page.active #col-injection .injection-actions{
  max-width: 230px;       /* card never wider than 450px */
  justify-self: center;   /* centre it in its 1fr track */
}

/* ==== Column 2: Perform an Injection overrides ==== */
#home.page.active #col-injection .injection-actions {
  /* 1) Push icon to left and button to right */
  display: flex;
  align-items: center;
  justify-content: space-between;               /* image at left, button at right */
  padding-right: clamp(1rem, 1vw, 1rem);        /* gutter from right edge */
  overflow: visible;                            /* allow overlap between children */
}

#home.page.active #col-injection .injection-actions .icon {
  flex: 0 0 auto;                               /* keep natural size */
  z-index: 2;                                   /* sit above overlapping button */
  /* undo old size caps */
  max-width: none;      /* remove the 50% / 100px cap */
  max-height: none;

  /* set a responsive width */
  width: clamp(180px, 10vw, 300px);
  height: auto;         /* preserve aspect ratio */

}

#home.page.active #col-injection .injection-actions button.primary {
  max-width: 60%;                               /* never exceed 60% of the column */
  width: auto;                                  /* shrink-to-fit text up to that cap */
  margin-left: -25%;                            /* overlap icon by ~10% of container */
  z-index: 1;                                   /* button sits beneath icon */
}

/* ——————————————————————————————————————————————————————————————————————————
   CARD-SPECIFIC FLEX UPDATES
   —————————————————————————————————————————————————————————————————————————— */

/* 1) Ensure every card is a column flex container (already should be) */
#home.page.active .home-col {
  display: flex;
  flex-direction: column;
}

/* 2) MED-SCHEDULE: fill under the <h2> and center its contents */
#home.page.active #col-schedule #med-schedule {
  flex: 1;                  /* grow to fill all space below the heading */
  display: flex;
  align-items: flex-start;      /* vertical centering */
  justify-content: center;  /* horizontal centering */
}



/* Perform an Injection: image left, buttons right */
.injection-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*
.injection-actions .icon {
  max-width: 70%;
  margin-right: 1rem;
}
  */


/* Calendar block styling */
.calendar-block {
  background: #3b1a53;
  color: #fff;
  border-radius: 8px;
  padding: 0.75rem;
  display: inline-block;
  text-align: center;
}
.calendar-block .time {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.calendar-block .weekday {
  display: block;
  font-size: 0.9rem;
  color: #fff
}
.calendar-block .monthday {
  display: block;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

/* Progress tracker */
.progress-tracker {
  position: relative;
  margin-top: 0.5rem;
}
.progress-tracker #progress-text {
  display: block;
  margin-bottom: 0.5rem;
}
.progress-tracker progress {
  width: 100%;
  height: 1rem;
  -webkit-appearance: none;
}
.progress-tracker progress::-webkit-progress-bar {
  background: #f3f3f3;
  border-radius: 4px;
}
.progress-tracker progress::-webkit-progress-value {
  background: #4caf50;
  border-radius: 4px;
}
/* Checkmark for 100% */
.progress-tracker .checkmark {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  font-size: 1.8rem;
  color: #4caf50;
}
.progress-tracker .hidden {
  display: none;
}


/* Perform an Injection */
.injection-actions {
  display: flex;
  align-items: center;
  justify-content: center;
}
.injection-actions .icon {
  max-width: 250px;
  margin-right: .5rem;
  margin-left: .5rem;

}

/* Injection Support page grid */
.support-grid {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.support-col {
  text-align: center;
  padding: 1rem;
  border-left: 1px solid #ccc;
}
.support-col:first-child {
  border-left: none;
}
/* titles */
.support-col h3 {
  margin-bottom: 0.5rem;
}
/* icons fill */
.support-col img {
  max-width: 80px;
  margin-bottom: 0.5rem;
}

.support-col .ring-timer{
  margin-top:auto;       /* pushes the timer to the bottom   */
  margin-bottom:1rem;    /* breathing-room above the footer  */
}


.ring-timer canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* Injection Support page: header at top, timer at bottom */
/* 1) Make the page container full-width/height */
#page-injection-support {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1rem; /* optional gutter */
}

/* 2) Define the 5-column grid to fill the full width */
.support-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 1fr;    /* ← make that one row fill the container height */
  width: 100%;
  height: 100%;
  gap: 1rem; /* optional spacing */
}

/* 3) Style each column: header+image stacked at top, timer at bottom */
/* Allow flex children to shrink/grow properly */
.support-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem;
  border-left: 1px solid #ccc;
  
  /* allow children (img + timer) to size properly */
  min-height: 0;
  justify-content:space-between;    /* ← THIS line fixes the alignment */

}

.support-col:first-child {
  border-left: none;
}

/* Heading stays at top */
.support-col h3 {
  margin: 0 0 0.5rem;
  flex: 0 0 auto;
}

/* Image expands into available middle space */
/* remove old max-width on images */
/* image sits right below the header, no flex growth */
.support-col img {
  flex: 0 0 auto;       /* do not grow or shrink */
  max-width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 100%;    /* ← keep images inside the column */
  margin-bottom: auto;  /* push the timer down */
}

/* push timer to bottom */
.ring-timer {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  margin-top:auto;            /* push downward …            */
  margin-bottom:3rem;         /* … then lift 3 rem off bottom */

}
.ring-timer canvas {
  position: absolute;
  inset:0;
  top: 0; left: 0;
  width: 100%; height: 100%;
}


/* === RING TIMER ==================================================== */
.ring-row      {display:flex;gap:18px;justify-content:center}
.ring          {flex:1;max-width:160px;cursor:pointer;
                display:flex;flex-direction:column;align-items:center}
.ring svg      {width:100%;height:auto}
.label         {margin-bottom:6px;font:600 1rem "Nunito",sans-serif}

.track,.path   {fill:none;stroke-width:12;stroke-linecap:round}
.track         {stroke:#c7c7c7}
.path          {stroke:#0B7B8B;transform:rotate(-90deg);
                transform-origin:50% 50%;transition:stroke-dashoffset .3s linear}
.ring.done .path {stroke:#1cbf73}        /* green when finished */
.ring.done .time{
  font-size: 36px;     /* pick any size that fits comfortably */
  fill: #1cbf73;       /* keep the green you already set */
}

.ring.inline {width:160px;margin:12px auto}

.time          {font:700 22px/1 "Nunito",sans-serif;text-anchor:middle}


/* center the whole block */
.timer-wrapper {height:100%;display:flex;flex-direction:column;
  justify-content:center;align-items:center}

/* ring row stays horizontal */
.ring-row {display:flex;gap:18px;justify-content:center}

/* make sure clicks on the SVG propagate to the parent .ring */
.ring svg {pointer-events:none}          /* svg ignores taps, div catches */

/* keep previously-added ring styles … */


/*  PORTRAIT WARNING  */
@media (orientation:portrait) {
body::before{
content:"Rotate your phone for the best experience 😊";
position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
background:#1cbf73;color:#fff;font-size:1.2rem;text-align:center;padding:20px;
z-index:9999}
}

.tiny-link {
  margin:12px auto 0;
  font-size:.85rem;
  color:#888;
  text-decoration:underline;
  cursor:pointer;
}

.hint { transition: opacity .25s ease; }


/* make ring and video sit side by side */
.shake-step {
  display: flex;
  align-items: center;
  gap: 16px;            /* space between them */
  flex-wrap: wrap;      /* if screen is too narrow they'll stack */
}
/* force the video container to take up the rest of the space */
.shake-video {
  flex: 1 1 40%;        /* grow, shrink, base 40% width */
  max-width: 60%;       /* but never more than 60% */
}

.trainer { z-index:10; }   /* sits above background pages */

#deck-body       {display:flex;flex-direction:column;}
#step-content    {flex:1 0 auto;}        /* grows with content */
progress.audio-bar       {margin:5px 0 5px;}    /* spacing tweak     */

.page.hidden { display:none !important; }



#deck {
  position: relative; /* container for absolute‐positioned home button */
}



/* circular purple home button */
.home-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 50px;
  height: 50px;
  background-color: #3b1a53;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ───── generic figure used by unlock & twist ───────────────────── */
.click-figure{
  position:relative;
  margin:1.5rem auto 0;
  width:max-content;
}
.click-figure .base{
  display:block;
  width:220px;              /* tweak if you need another max size */
  height:auto;
}
.click-figure .check{
  position:absolute;
  top:50%;                /* anchor centre point… */
  left:50%;
  transform:translate(-50%,-50%);   /* …and offset back ½ size  */

  /* scale but keep aspect ratio */
  max-width:70%;
  max-height:70%;
  width:auto;
  height:auto;

  pointer-events:none;
  opacity:0;
  transition:opacity .50s ease;
}
.click-figure .check.visible{ opacity:1; }

/* ─── inject-ring flash effect ─────────────────────────────────── */
@keyframes ring-flash {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: 0.3; transform: scale(1.08); }
}

/* ───── flash any ring ───────────────────────────────────────── */
@keyframes ring-flash{
  0%,100%{ opacity:1;   transform:scale(1) }
  50%    { opacity:.3; transform:scale(1.08) }
}

/* applies to every ring, not just #inject-ring */
.ring.flash{
  animation:ring-flash .5s ease-in-out 1;
}

.ring-timer.flash {
  animation: ring-flash .5s ease-in-out 1;
}

.home-btn svg {
  width: 40px;
  height: 40px;
  stroke: #fff;
}

#sites .step-side{
  /* keep the usual centring */
  display:flex;
  justify-content:center;
  align-items:center;

  /* never let the image column exceed 75 vh                      */
  max-height:75vh;
  overflow:hidden;               /* hides any stray pixels       */
}

#sites .step-side img{
  width:auto;           /* maintain aspect ratio horizontally  */
  height:auto;
  max-width:50%;       /* obey the column’s width             */
  max-height:50%;      /* obey the 75 vh cap above            */
  object-fit:contain;
}

.step-side img.sites-img{
  height:auto;
  width:auto;
  max-width: 100%;      /* obey the column’s width  */
  max-height:75vh;     /* never grow beyond 75 % of the viewport height */
  object-fit:contain;  /* preserve aspect ratio     */
  display:block;
}

/* === Footer Navigation & Home Button === */

/* 1) Hide the old top‐absolute Home button */
#deck .home-btn {
  display: none;
}

/* 2) Style your bottom footer bar */
footer.deck-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;               /* fixed nav height */
  display: flex;
  align-items: center;        /* vertical centering */
  padding: 0 16px;            /* only horizontal padding */
  gap: 12px;                  /* space between all buttons */
  background: #f3f5f6;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
}

/* 3) Prevent full-width on footer buttons */
footer.deck-footer button {
  flex: 0 0 auto;             /* don’t grow or shrink */
  width: auto;                /* shrink-wrap to content */
  min-width: 0;               /* allow very small buttons */
}

/* 4) Style the new Home icon button */
.footer-home-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #3b1a53;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 5) Icon inside the Home button */
.footer-home-btn svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
}

/* 6) Keep deck panels from sliding under the footer */
#deck-body,
#deck-side {
  padding-bottom: 56px;       /* match footer height */
  box-sizing: border-box;
}


.footer-home-btn {
  /* 1) Force square shape */
  width: clamp(40px, 6vw, 56px);
  aspect-ratio: 1 / 1;    /* always 1:1 */
  padding: 0;             /* no inner spacing to bloat the box */
  
  /* 2) Circle crop */
  border-radius: 50%;
  overflow: hidden;       /* clip any overflowing SVG */
  
  /* 3) Center the icon */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 4) Your existing styling */
  background: #3b1a53;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}


/* ─── 1) Timer Ring Size Override ───────────────────────────────── */
.ring.inline,
.ring.inline svg {
  /* never smaller than 100px, scale up to 160px, responsive in between */
  max-width: clamp(100px, 15vw, 160px) !important;
  width: 100% !important;
  height: auto !important;
}

/* ─── 1) Shrink all click-figures except those marked .no-shrink ───── */
figure.click-figure:not(.no-shrink) {
  width: clamp(80px, 12vw, 140px) !important;
  max-width: 100% !important;
  margin: 1rem auto !important;
}
figure.click-figure:not(.no-shrink) img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}


.timer-instruction {
  font-size: 0.85rem;
  color: #555;
  margin: 0.2rem 0 0.5rem;
  text-align: center;
}



/* Explicit stable container positioning */
.ring-container {
  position: absolute;
  bottom: 0; 
  left: 50%; 
  transform: translateX(-50%);
  width: clamp(80px, 14vw, 120px);
  height: auto;
  box-sizing: border-box;
}

/* .ring-timer explicitly handles only sizing and visual style */
#page-injection-support .ring-timer {
  width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* Set each column explicitly to relative positioning for ring-timer alignment */
#page-injection-support .support-col {
  position: relative;
  padding-bottom: 140px; /* provide sufficient space for the absolutely positioned timer */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Explicit styling for "Back" button */
#btn-support-back {
  align-self: flex-start;      /* explicitly aligns button left */
  color: #FFFFFF;              /* Text color */
  background-color: #3b1a53;   /* Background color */
  font-size: 1.2rem;           /* Larger button text explicitly */
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;        /* explicit padding to maintain size */
  display: block;             /* Full block width */
  width: auto;                /* Auto width */
  max-width: 200px;           /* Control maximum width explicitly */
  min-width:150px;
  margin-left: 1rem;          /* Explicitly align button to left edge of screen */
  margin-bottom: 1rem;        /* Minimal margin from bottom of screen */         /* explicitly ensures minimum button width */
  text-align: center;          /* explicitly centered button text */
}


/* explicitly define hover state (optional) */
#btn-support-back:hover {
  background-color: #52246e; /* darker shade on hover, optional */
}

/* Explicitly larger text for Home page buttons */
#home.page.active button {
  font-size: 1.2rem;       /* explicitly increase button text size */
  padding: 0.75rem 1rem;   /* explicitly adjust padding for balanced appearance */
}


.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  max-width: 320px;
}
.hidden {
  display: none;
}

button#btn-start.primary {
  font: 600 2rem/1.2 "Nunito", Arial, sans-serif !important;
  padding: 2rem 3rem !important;
}

/* Clearly makes the intro question text significantly larger */
#page-q1 h2,
#page-q2 h2 {
  font-size: 1.8rem;       /* much larger heading text */
  line-height: 1.4;        /* improves readability */
  margin-bottom: 1.5rem;   /* adds visual spacing */
}

/* Explicitly makes intro answer buttons larger and clearer */
.choices button {
  font-size: 1.2rem;        /* noticeably larger button text */
  padding: 0.75rem 1rem;    /* increased padding for clearer interaction */
  margin: 0.5rem;           /* adds clear spacing between buttons */
  min-width: 200px;         /* uniform width for visual consistency */
  border-radius: 6px;       /* slightly rounded corners */
}

/* “Add Shot” page header nav */
.reminder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 1rem;
}

.reminder-header h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.reminder-header .link {
  background: none;
  border: none;
  padding: 0.5rem;
  font: 600 1rem/1 "Nunito", sans-serif;
  color: #1cbf73;
  cursor: pointer;
}

/* Form container */
.reminder-form {
  background: #fff;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  max-width: 400px;
  margin: 0 auto;
}

.reminder-form label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
}

.reminder-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-bottom: 1rem;
  box-sizing: border-box;
  appearance: none;
}

/* Hide bottom Save/Cancel buttons on the reminder page */
#page-reminder .reminder-form button {
  display: none;
}


/* reminder header: title on top, actions below */
.reminder-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e0e0e0;
}

.reminder-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.reminder-actions {
  margin-top: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: space-between;
}


/* ─ Injection UI ───────────────────────────────────────────────── */

/* Shared card styles */
.injection-success,
.injection-countdown {
  text-align: center;
  padding: 1rem 0;
}

/* Labels & subtext */
.injection-success .label,
.injection-countdown .label {
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: 600;
}

.injection-success .subtext,
.injection-countdown .subtext {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  color: #666;
}

/* “Edit shot” button 
.injection-success .edit-shot {
  background: none;
  border: none;
  color: #1cbf73;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.6rem;
}*/

.edit-shot{
    background:none;
    border:none;
    color:#1cbf73;
    font-weight:600;
    font-size:0.5rem;     /* smaller than the default 1.5 rem */
    line-height:1.1;
    padding:0.25rem 0.4rem;
    cursor:pointer;
  }

/* Center the canvas */
canvas.injection-gauge {
  display: block;
  margin: 0 auto;
}


/* ───── SEMI-CIRCULAR GAUGE CONTAINER ─────────────────────────────── */
.circle-wrap{                /* full-width, half-height */
  position:relative;
  width:100%;
  aspect-ratio:2/1;          /* semicircle (width = 2 × height) */
  overflow:visible;          /* let the canvas protrude if needed */
}

/* overlay canvas that actually draws the gauge */
.injection-circle{
  position:absolute;
  inset:0;                   /* stretch across the wrapper */
  pointer-events:none;
}

/* text block sits just below the centre of the semicircle */
.circle-content{
  position:absolute;
  top:90%;                   /* tweak until it looks perfect */
  left:50%;
  transform:translate(-50%,-50%);
  text-align:center;
}


.circle-content .label{
  font-size: 1.35rem;     /* was inherited ≈ 1.2 rem */
  font-weight: 700;
  line-height: 1.25;
}

.days-big{
  display:block;
  font-size:2rem;      /* headline scale */
  font-weight:700;
  line-height:1.1;
  margin-bottom:0.1rem;
}

/* smaller descriptor line */
.days-desc{
  display:block;
  font-size:1.0rem;
  font-weight:600;
  line-height:1.1;
  white-space: nowrap;   /* prevent automatic wrapping    */

}


/* calendar button under the gauge */
.calendar-btn{
  margin: 0 !important;         /* explicitly remove margins */
  background: none;
  border: none;
  color: #3b1a53;
  cursor: pointer;
  padding: 0;
  width: 50px;                  /* explicitly set width to match icon */
  height: 50px;   
  align-items: center;          /* vertically center icon */
  justify-content: center;      /* horizontally center icon */
}

.calendar-btn svg{ display:block }

/* modal layout */
.modal{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  z-index:1000;
}
.modal.hidden{ display:none }
.calendar-box{
  background:#fff; border-radius:8px; padding:1rem 1.25rem;
  min-width:18rem;
}
.calendar-box header{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.5rem;
}
.calendar-box h3{ margin:0; font:600 1.1rem "Nunito",sans-serif }
#cal-close{ background:none;border:none;font-size:1.25rem;cursor:pointer }


/* make sure Flatpickr’s inline calendar shows in your modal */
.calendar-box .flatpickr-calendar {
  position: static;      /* override any absolute positioning */
  margin-top: 0.75rem;   /* separate it from the input */
  box-shadow: none;      /* optional—keep it visually “inside” the modal */
  width: auto !important;/* let it size itself */
  max-width: 100%;
  background: transparent;

}

.flatpickr-day.completed {
  background-color: #27ae60 !important; /* Solid green */
  color: white !important;
  border-radius: 50% !important;
}

.flatpickr-day.scheduled {
  position: relative !important;
}

.flatpickr-day.scheduled::before {
  content: '' !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  right: 2px !important;
  bottom: 2px !important;
  border: 2px solid #6a2e91 !important; /* Purple ring */
  border-radius: 50% !important;
  pointer-events: none !important;
}

.circle-content .actions {
  display: flex;
  justify-content: center;   /* Horizontally centers buttons */
  align-items: center;       /* Vertically aligns buttons neatly */
  gap: 0.5rem;               /* Adds clear spacing between buttons */
  margin-top: 0.75rem;       /* Adds explicit margin above buttons */
}

/* Ensure calendar-btn and primary buttons don't overly flex */
.circle-content .actions button {
  flex: 0 0 auto;            /* Buttons retain natural size */
}

.circle-wrap.glow {
  filter: drop-shadow(0 0 8px rgba(106, 46, 145, 0.8)); /* Purple glow by default */
}

.circle-wrap.glow.green {
  filter: drop-shadow(0 0 8px rgba(28, 191, 115, 0.8)); /* Green glow explicitly for completed */
}

.label-itstime{
  display:block;
  font-size:1.2rem;      /* headline scale */
  font-weight:700;
  line-height:1.1;
  margin-bottom:0.1rem;
  margin-top:0.2rem;
}