/* For-the-grown-up guide card. Self-contained (with variable fallbacks and its
   own button styling) so it renders identically on the activity pages, which load
   styles.css, and on the printable pages, which load print.css. */

.guide-btn {
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft, #7A6E60);
  background: rgba(74, 64, 56, 0.06); border: none; border-radius: 999px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap; align-self: center;
  transition: background 0.15s ease, background-size 0.2s ease;
  /* press-and-hold fill (see hold.js; 1.5s matches GUIDE_HOLD_MS) */
  background-image: linear-gradient(rgba(231, 178, 76, 0.45), rgba(231, 178, 76, 0.45));
  background-repeat: no-repeat; background-size: 0% 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.guide-btn.is-holding { background-size: 100% 100%; transition: background-size 1.5s linear; }
.guide-btn:hover { background-color: rgba(74, 64, 56, 0.11); }
.guide-btn:active { transform: scale(0.97); }
.guide-btn:focus-visible { outline: 3px solid rgba(231, 178, 76, 0.6); outline-offset: 2px; }
.guide-btn--float { position: fixed; bottom: 16px; left: 16px; z-index: 30; background: #fff; box-shadow: 0 10px 24px rgba(74, 64, 56, 0.14); }

body.guide-open { overflow: hidden; }
.guide-backdrop { position: fixed; inset: 0; background: rgba(30, 26, 22, 0.4); z-index: 40; }
.guide-panel {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(560px, 100%); max-height: 88vh; z-index: 41;
  background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -12px 40px rgba(74, 64, 56, 0.24);
  overflow: hidden;
}
.guide-panel:focus { outline: none; } /* focused programmatically for screen readers; the modal is already obvious */
.guide-panel__inner { padding: 26px 24px 30px; max-height: 88vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.guide-panel__eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 700; color: var(--light, #E7B24C); margin: 0 0 6px; }
.guide-panel__title { font-size: 24px; font-weight: 700; color: var(--ink, #4A4038); margin: 0 0 18px; }
.guide-part { margin-bottom: 16px; }
.guide-part h3 { font-size: 15px; font-weight: 700; color: var(--ink, #4A4038); margin: 0 0 4px; }
.guide-part p { font-size: 16px; line-height: 1.55; color: var(--ink-soft, #7A6E60); margin: 0; }
/* Grown-up controls inside the panel (Today's number, Start a new seed). */
.guide-controls { border-top: 1px solid rgba(74, 64, 56, 0.12); padding-top: 16px; }
.guide-numgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; }
.guide-num {
  min-height: 48px; font-family: inherit; font-size: 18px; font-weight: 700;
  color: var(--ink, #4A4038); background: rgba(74, 64, 56, 0.06);
  border: none; border-radius: 12px; cursor: pointer;
}
.guide-num.is-current { background: var(--light, #E7B24C); }
.guide-num:focus-visible { outline: 3px solid rgba(74, 64, 56, 0.5); outline-offset: 2px; }
.guide-hold {
  margin-top: 12px; width: 100%; min-height: 56px;
  font-family: inherit; font-size: 17px; font-weight: 600; color: var(--ink, #4A4038);
  background-color: rgba(74, 64, 56, 0.07); border: none; border-radius: 14px; cursor: pointer;
  /* the confirming fill (see hold.js; 1.5s matches GUIDE_HOLD_MS) */
  background-image: linear-gradient(var(--light, #E7B24C), var(--light, #E7B24C));
  background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size 0.2s ease;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.guide-hold.is-holding { background-size: 100% 100%; transition: background-size 1.5s linear; }
.guide-hold:focus-visible { outline: 3px solid rgba(74, 64, 56, 0.5); outline-offset: 2px; }
.guide-undo {
  margin-top: 10px; width: 100%; min-height: 52px;
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--ink, #4A4038);
  background: #fff; border: 2px solid var(--light, #E7B24C); border-radius: 14px; cursor: pointer;
}
.guide-undo:active { transform: scale(0.99); }
.guide-undo:focus-visible { outline: 3px solid rgba(74, 64, 56, 0.5); outline-offset: 2px; }

.guide-close {
  margin-top: 10px; width: 100%; min-height: 56px;
  font-family: inherit; font-size: 19px; font-weight: 600; color: var(--ink, #4A4038);
  background: var(--light, #E7B24C); border: none; border-radius: 18px; cursor: pointer;
}
.guide-close:active { transform: scale(0.99); }
.guide-close:focus-visible { outline: 3px solid rgba(74, 64, 56, 0.5); outline-offset: 2px; }

@media (min-width: 620px) { .guide-panel { border-radius: 26px; bottom: 4vh; } }
@media (prefers-reduced-motion: no-preference) {
  .guide-panel { animation: guideUp 0.28s ease; }
  @keyframes guideUp { from { transform: translate(-50%, 12%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
}
.reduced-motion .guide-panel { animation: none !important; }
@media print { .no-print { display: none !important; } }