/* Shared styles for /printables/routines/* pages. */

.routines-hero { background: linear-gradient(135deg,#fff8e1 0%,#ffe9c4 100%); padding: 2.5rem 0 2rem; text-align: center; }
.routines-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 800; margin-bottom: 0.4rem; }
.routines-hero p { font-size: 1rem; color: var(--color-text); max-width: 540px; margin: 0 auto; }

.routines-section { padding: 2.5rem 0 4rem; }
.routines-section-title { font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #888; margin-bottom: 1rem; }

.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.template-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); text-decoration: none; color: var(--color-text); transition: transform .18s, box-shadow .18s; display: flex; flex-direction: column; overflow: hidden; }
.template-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.template-thumb { aspect-ratio: 16 / 11; background: linear-gradient(135deg, #fff8e1, #ffe9c4); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.template-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.template-card h3 { font-size: 1.05rem; font-weight: 800; margin: 1rem 1rem 0.35rem; }
.template-card p { font-size: .85rem; color: #666; margin: 0 1rem; }
.template-cta { display: inline-block; margin: .8rem 1rem 1rem; font-size: .85rem; font-weight: 800; color: var(--color-accent); }

.routines-cta-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1.5rem; }
.routines-cta-row a { font-weight: 800; font-size: .9rem; color: var(--color-accent); text-decoration: none; }

/* Builder breadcrumb - keeps the user oriented and gives an obvious back
   path to /printables/routines/ or /my-routines so they aren't stuck. */
.builder-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .85rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  font-size: .9rem;
  font-weight: 700;
}
.builder-breadcrumb a {
  color: var(--color-text-light);
  text-decoration: none;
}
.builder-breadcrumb a:hover { text-decoration: underline; color: var(--color-accent); }
.builder-breadcrumb .sep { color: #ccc; }
.builder-breadcrumb .current { color: #555; }
.undo-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .8rem;
  border: 1.5px solid #ccc;
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color .15s, background .15s, opacity .15s;
}
.undo-btn:hover:not(:disabled) { border-color: var(--color-accent); background: #f3fbfa; }
.undo-btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 520px) {
  /* Keep Undo visible on narrow screens instead of letting it wrap away */
  .undo-btn { margin-left: 0; }
}

/* Builder layout */
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 0.5rem 1rem 3rem; max-width: 1200px; margin: 0 auto; }
@media (max-width: 800px) { .builder { grid-template-columns: 1fr; } }

.builder-editor { background: #fff; border-radius: 10px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.builder-preview { background: #fff; border-radius: 10px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(0,0,0,.05); position: sticky; top: 1rem; align-self: start; }

/* Preview header: view dropdown + the single Print button */
.preview-controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.preview-controls label { font-size: .85rem; font-weight: 700; color: #555; }
.preview-controls select {
  padding: .4rem .5rem;
  border: 1.5px solid #ccc;
  border-radius: 6px;
  font-family: inherit;
  font-size: .9rem;
  background: #fff;
}
.preview-controls #print-view { margin-left: auto; }

/* Print directly from the builder preview. display:none the builder chrome
   (not visibility:hidden — hidden elements still occupy layout space, which
   was padding the print out to 3 blank-ish sheets). What remains is the
   rendered .print-page inside #preview-frame at full size. Scoped via :has
   so it only affects the builder page. */
@media print {
  body:has(#preview-frame) .site-nav,
  body:has(#preview-frame) .site-footer,
  body:has(#preview-frame) .builder-breadcrumb,
  body:has(#preview-frame) .builder-editor,
  body:has(#preview-frame) .preview-controls,
  body:has(#preview-frame) .routines-privacy-note {
    display: none !important;
  }
  body:has(#preview-frame) main,
  body:has(#preview-frame) .builder {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: none !important;
  }
  body:has(#preview-frame) .builder-preview {
    position: static !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border-radius: 0 !important;
  }
  body:has(#preview-frame) #preview-frame {
    transform: none !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* Add Item + Undo sit together below the items list */
.items-actions { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }
.items-actions .add-item-btn { margin-top: 0; }
.items-actions .undo-btn { margin-left: auto; }

.builder-row { margin-bottom: 1rem; }
.builder-row label { display: block; font-size: .85rem; font-weight: 700; color: #555; margin-bottom: .35rem; }
.builder-row input[type="text"] { width: 100%; padding: .55rem .7rem; border: 1.5px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: inherit; }
.builder-row input[type="text"]:focus { outline: none; border-color: var(--color-accent); }

.schedule-pills { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.schedule-pill { padding: .35rem .75rem; border: 1.5px solid #ccc; border-radius: 999px; background: #fff; cursor: pointer; font-size: .85rem; font-weight: 700; }
.schedule-pill.active { background: var(--color-yellow); border-color: #d4af1f; }

.custom-days { display: inline-flex; gap: .25rem; margin-left: .5rem; }
.custom-day { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #ccc; border-radius: 50%; font-size: .75rem; font-weight: 800; cursor: pointer; background: #fff; }
.custom-day.active { background: var(--color-yellow); border-color: #d4af1f; }
.custom-days.hidden { display: none; }

.items-list { list-style: none; padding: 0; margin: 0; }
.item-card { display: flex; align-items: center; gap: .65rem; padding: .65rem .8rem; border: 1.5px solid #e3e3e3; border-radius: 8px; background: #fff; margin-bottom: .5rem; cursor: grab; }
.item-card.dragging { opacity: .4; }
.item-card .drag-handle { color: #aaa; font-weight: 800; font-size: 1.2rem; padding-right: .25rem; }
.item-card .item-icon { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.item-card .item-label { flex: 1; font-weight: 700; font-size: .95rem; }
.item-card button { background: none; border: none; color: #888; font-size: 1rem; cursor: pointer; padding: .25rem .4rem; }
.item-card button:hover { color: var(--color-accent); }

.add-item-btn {
  display: inline-block;
  margin-top: .5rem;
  padding: .55rem .9rem;
  background: var(--color-yellow);
  border: 2px solid var(--color-yellow);
  border-radius: 6px;
  font-weight: 800;
  font-size: .9rem;
  cursor: pointer;
  color: #111;
  transition: background .15s, border-color .15s;
}
.add-item-btn:hover { background: #ffd84d; border-color: #ffd84d; }

.save-status { font-size: .8rem; color: #888; margin-left: .5rem; }

.print-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed #ddd; }
.print-btn {
  background: var(--color-accent);
  color: #fff;
  border: 2px solid var(--color-accent);
  padding: .55rem 1rem;
  font-weight: 800;
  font-size: .9rem;
  border-radius: 6px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.print-btn:hover {
  background: #159a90;
  border-color: #159a90;
}

/* Yellow variant - used for "Start from scratch" / "+ New routine" / etc.
   Use a.print-btn--yellow / button.print-btn--yellow so this beats any
   descendant-selector text-color rule on the parent (e.g. .routines-cta-row a
   colors anchors pink, which was making the button text pink-on-yellow). */
a.print-btn--yellow,
button.print-btn--yellow,
.print-btn--yellow {
  background: var(--color-yellow);
  border-color: var(--color-yellow);
  color: #111;
}
a.print-btn--yellow:hover,
button.print-btn--yellow:hover,
.print-btn--yellow:hover {
  background: #ffd84d;
  border-color: #ffd84d;
  color: #111;
}

/* Item editor modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.modal-backdrop.open { display: flex; }
/* Modal is a flex column: title + label + search stay put at the top,
   the icon grid scrolls in the middle, Save/Cancel pinned at the bottom. */
.modal {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal h3 { margin: 0 0 .8rem; font-weight: 800; flex-shrink: 0; }
.modal > .builder-row, .modal > .icon-search { flex-shrink: 0; }
#icon-categories { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -.25rem; padding: 0 .25rem; }
.modal-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1.5px solid #eee;
  flex-shrink: 0;
}
.modal-actions button {
  padding: .5rem 1rem;
  border: 2px solid #ddd;
  border-radius: 6px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.modal-actions .save-btn { background: var(--color-yellow); border-color: var(--color-yellow); color: #111; }
.modal-actions .save-btn:hover { background: #ffd84d; border-color: #ffd84d; }
.modal-actions .cancel-btn { background: #fff; }
.modal-actions .cancel-btn:hover { background: #f5f5f5; border-color: #bbb; }

/* Per-item box color picker (Color Me theme) */
.m-color-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.m-color-preset {
  width: 30px; height: 30px;
  border: 2px solid rgba(0,0,0,.12);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform .1s, box-shadow .1s;
}
.m-color-preset:hover { transform: scale(1.12); }
.m-color-preset.selected {
  border-color: var(--color-text);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-text);
}
.m-color-control { display: inline-flex; align-items: center; gap: .6rem; }
.m-color-custom-label { font-size: .82rem; font-weight: 700; color: #777; }
.m-color-control input[type="color"] {
  width: 48px; height: 36px; padding: 0;
  border: 1.5px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer;
}
.m-color-clear {
  padding: .35rem .7rem; border: 1.5px solid #ccc; border-radius: 6px;
  background: #fff; font-family: inherit; font-size: .82rem; font-weight: 700;
  color: #888; cursor: pointer;
}
.m-color-clear:hover { border-color: var(--color-accent); color: var(--color-accent); }
.m-color-row:not(.is-set) .m-color-clear { display: none; }

.icon-search { width: 100%; padding: .5rem; border: 1.5px solid #ccc; border-radius: 6px; margin-bottom: .75rem; }
.icon-category h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #888; margin: 1rem 0 .4rem; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: .4rem; }
.icon-tile { aspect-ratio: 1/1; border: 1.5px solid #e3e3e3; border-radius: 8px; padding: .3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.icon-tile:hover { border-color: var(--color-accent); }
.icon-tile.selected { border-color: var(--color-accent); background: #e9faf8; }
.icon-tile img { width: 100%; height: 100%; object-fit: contain; }


/* Privacy reassurance pinned below the routines list. */
.routines-privacy-note {
  margin: 2rem auto 0;
  max-width: 1200px;
  padding: 1rem 1.15rem;
  border: 1.5px solid #e8d6c3;
  border-radius: 10px;
  background: #fff8ed;
  color: #5c4830;
  font-size: .9rem;
  line-height: 1.45;
}
/* On the builder page the note sits under the grid; match the builder's
   own box (max-width 1200px, centered, 1rem side gutter) so it lines up. */
.builder + .routines-privacy-note {
  max-width: 1200px;
  margin: 1.5rem auto 2.5rem;
  width: calc(100% - 2rem);
}
.routines-privacy-note strong { color: #3a2d1f; }
.routines-privacy-note a {
  color: var(--color-accent);
  font-weight: 700;
  text-decoration: underline;
}
.routines-privacy-note a:hover { color: #0e7d74; }

/* My routines list */
.routine-list { list-style: none; padding: 0; margin: 0; }
.routine-row { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1.5px solid #e3e3e3; border-radius: 8px; margin-bottom: .65rem; background: #fff; }
.routine-row h3 { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 800; }
.routine-row .meta { color: #888; font-size: .82rem; }
.routine-row .actions { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.routine-row .actions a, .routine-row .actions button { background: #fff; border: 1.5px solid #aaa; padding: .35rem .65rem; border-radius: 6px; font-size: .82rem; font-weight: 700; color: var(--color-text); text-decoration: none; cursor: pointer; }
.routine-row .actions a:hover, .routine-row .actions button:hover { border-color: var(--color-accent); }
.routine-empty { padding: 2rem 1rem; text-align: center; color: #888; font-style: italic; }

/* Print views - designed to fit on a single US Letter page (8.5 x 11).
   These rules apply to .print-page ALWAYS (not just under @media print) so
   the in-builder preview and the on-screen print.html both render exactly
   like the actual printed sheet - no surprise zoom / crop differences
   when the user hits Print.

   @page margin is zeroed so browsers can't draw their own "page 1 of 1
   · URL · timestamp · title" header/footer in that gutter. .print-page
   carries its own padding (0.35in) as the visible white margin. */
@page { margin: 0; size: letter portrait; }
@media print {
  .no-print { display: none !important; }
  /* The on-screen privacy reassurance box is never part of a printout. */
  .routines-privacy-note { display: none !important; }
  html, body { background: #fff; }
  /* Preserve theme colors when printing. Without this most browsers drop
     all background-color / background-image fills to save ink. */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .print-page {
    page-break-after: avoid;
    page-break-inside: avoid;
  }
}

/* Print-style sizing applied to every .print-page so preview === print. */
.print-page {
  box-shadow: 0 0 12px rgba(0,0,0,.05);  /* preview-only depth, harmless in print */
  padding: 0.35in;
}
@media print { .print-page { box-shadow: none; min-height: 10in; } }

.print-page .print-hero { margin-bottom: .3rem; border-width: 1.5px; border-radius: 9px; }
.print-page .print-hero-text { padding: .55rem .9rem .45rem; }
.print-page .print-hero .page-title .page-title-pill { font-size: 2rem; padding: .3rem 1.2rem .38rem; }
.print-page .print-hero .page-subtitle { font-size: .8rem; margin-top: .4rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; opacity: .75; font-style: normal; }
.print-page .print-hero .theme-banner { aspect-ratio: 3 / 1; }
/* daily-items takes the leftover vertical space between hero and reward
   so the list grows/shrinks to fill the page automatically. Each item
   gets an equal share via flex: 1. */
.print-page .daily-items {
  margin: .65rem 0;
  gap: .4rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.print-page .daily-item {
  padding: .4rem .65rem;
  border-radius: 10px;
  border-width: 2px;
  gap: .7rem;
  flex: 1 1 0;       /* each item takes equal share of available space */
  min-height: 0;
}
.print-page .daily-item .item-num { width: 30px; height: 30px; font-size: .95rem; }
.print-page .daily-item img { width: 48px; height: 48px; }
.print-page .daily-item .label { font-size: 1.15rem; }
.print-page .daily-item .check { width: 30px; height: 30px; }
.print-page .daily-reward { margin-top: .85rem; padding: .55rem .85rem; gap: .85rem; border-width: 2.5px; }
.print-page .daily-reward .reward-sticker { width: 64px; height: 64px; }
.print-page .daily-reward .reward-label { font-size: .9rem; letter-spacing: .04em; }
.print-page .daily-reward .reward-stars .star-svg { width: 26px; height: 26px; }

/* Density steps - chosen by item count in renderPrintView. Default
   sizing is comfortable for 5-6 items; --huge and --large grow the
   icon + label so 1-4 item routines fill the page; --compact and
   --ultra shrink so 7-10 item routines stay on a single page. */
.print-page .daily-items--huge { gap: .65rem; }
.print-page .daily-items--huge .daily-item { padding: .9rem 1.1rem; gap: 1.1rem; border-radius: 14px; border-width: 3px; }
.print-page .daily-items--huge .daily-item img { width: 90px; height: 90px; }
.print-page .daily-items--huge .daily-item .label { font-size: 1.85rem; }
.print-page .daily-items--huge .daily-item .item-num { width: 48px; height: 48px; font-size: 1.45rem; }
.print-page .daily-items--huge .daily-item .check { width: 50px; height: 50px; }

.print-page .daily-items--large { gap: .5rem; }
.print-page .daily-items--large .daily-item { padding: .6rem .9rem; gap: .9rem; border-radius: 12px; border-width: 2.5px; }
.print-page .daily-items--large .daily-item img { width: 68px; height: 68px; }
.print-page .daily-items--large .daily-item .label { font-size: 1.45rem; }
.print-page .daily-items--large .daily-item .item-num { width: 38px; height: 38px; font-size: 1.15rem; }
.print-page .daily-items--large .daily-item .check { width: 38px; height: 38px; }

.print-page .daily-items--compact { gap: .3rem; }
.print-page .daily-items--compact .daily-item { padding: .3rem .55rem; gap: .55rem; }
.print-page .daily-items--compact .daily-item img { width: 40px; height: 40px; }
.print-page .daily-items--compact .daily-item .label { font-size: 1.05rem; }
.print-page .daily-items--compact .daily-item .item-num { width: 26px; height: 26px; font-size: .85rem; }
.print-page .daily-items--compact .daily-item .check { width: 26px; height: 26px; }

.print-page .daily-items--ultra { gap: .22rem; }
.print-page .daily-items--ultra .daily-item { padding: .25rem .5rem; gap: .45rem; border-radius: 9px; }
.print-page .daily-items--ultra .daily-item img { width: 34px; height: 34px; }
.print-page .daily-items--ultra .daily-item .label { font-size: .95rem; }
.print-page .daily-items--ultra .daily-item .item-num { width: 22px; height: 22px; font-size: .78rem; }
.print-page .daily-items--ultra .daily-item .check { width: 22px; height: 22px; }
.view-daily:has(.daily-items--ultra) .print-hero { margin-bottom: .55rem; }
.view-daily:has(.daily-items--ultra) .print-hero .page-title .page-title-pill { font-size: 1.6rem; padding: .25rem 1rem .32rem; }
.view-daily:has(.daily-items--ultra) .print-hero .theme-banner { aspect-ratio: 3.6 / 1; }

/* Reward strip scales with the density tier so its visual weight matches
   the items above. Big items → big reward; tiny items → tiny reward. */
.view-daily:has(.daily-items--huge) .daily-reward {
  padding: 1.1rem 1.4rem; gap: 1.4rem; border-width: 3px;
}
.view-daily:has(.daily-items--huge) .daily-reward .reward-sticker { width: 110px; height: 110px; }
.view-daily:has(.daily-items--huge) .daily-reward .reward-label { font-size: 1.2rem; letter-spacing: .06em; }
.view-daily:has(.daily-items--huge) .daily-reward .reward-stars .star-svg { width: 38px; height: 38px; }

.view-daily:has(.daily-items--large) .daily-reward {
  padding: .85rem 1.1rem; gap: 1.05rem; border-width: 2.5px;
}
.view-daily:has(.daily-items--large) .daily-reward .reward-sticker { width: 84px; height: 84px; }
.view-daily:has(.daily-items--large) .daily-reward .reward-label { font-size: 1rem; letter-spacing: .05em; }
.view-daily:has(.daily-items--large) .daily-reward .reward-stars .star-svg { width: 30px; height: 30px; }

.view-daily:has(.daily-items--compact) .daily-reward {
  padding: .45rem .7rem; gap: .7rem; border-width: 2px;
}
.view-daily:has(.daily-items--compact) .daily-reward .reward-sticker { width: 56px; height: 56px; }
.view-daily:has(.daily-items--compact) .daily-reward .reward-label { font-size: .82rem; }
.view-daily:has(.daily-items--compact) .daily-reward .reward-stars .star-svg { width: 22px; height: 22px; }

.view-daily:has(.daily-items--ultra) .daily-reward {
  padding: .35rem .55rem; gap: .55rem; border-width: 1.5px;
}
.view-daily:has(.daily-items--ultra) .daily-reward .reward-sticker { width: 44px; height: 44px; }
.view-daily:has(.daily-items--ultra) .daily-reward .reward-label { font-size: .72rem; }
.view-daily:has(.daily-items--ultra) .daily-reward .reward-stars .star-svg { width: 18px; height: 18px; }

.print-page .specials-strip { margin: .3rem 0 0; padding: .22rem .35rem; }
.print-page .specials-strip .specials-label { font-size: .62rem; margin-bottom: .1rem; }
.print-page .specials-strip .specials-cell img { width: 22px; height: 22px; }
.print-page .specials-strip .specials-cell .label { font-size: .6rem; }
.print-page .specials-strip .specials-cell .day { font-size: .58rem; }
.print-page .tracker-table th, .print-page .tracker-table td { padding: .2rem; }
.print-page .tracker-table .item-cell img { width: 22px; height: 22px; }
.print-page .tracker-check { width: 20px; height: 20px; }
.print-page .schedule-day { min-height: 0; }

/* Hard single-page rule for the schedule view: cap each of the 7 day
   strips and clip any overflow, so the whole grid + hero + footer is
   guaranteed to stay on one US Letter sheet. */
.print-page.view-schedule .schedule-grid { gap: .25rem; }
.print-page.view-schedule .schedule-day {
  max-height: 1.1in;
  overflow: hidden;
  grid-template-columns: 0.85in 1fr;
}
.print-page.view-schedule .schedule-day-head { padding: .2rem .35rem; gap: .15rem; }
.print-page.view-schedule .schedule-day-head h4 { font-size: .82rem; }
.print-page.view-schedule .schedule-day-body { padding: .25rem .45rem; gap: .15rem; }
.print-page.view-schedule .schedule-routine .name { font-size: .68rem; margin-bottom: .15rem; }
.print-page.view-schedule .schedule-routine .strip { gap: .15rem .35rem; }
.print-page.view-schedule .schedule-routine .strip li { font-size: .65rem; gap: .12rem; }
.print-page.view-schedule .schedule-routine .strip img { width: 18px; height: 18px; }
@media print {
  .print-page .schedule-day { page-break-inside: avoid; }
  /* Belt-and-suspenders: the schedule print page itself never paginates. */
  .print-page.view-schedule { page-break-inside: avoid; }
}
.print-page .page-deco { width: 0.6in; height: 0.6in; bottom: 0.4in; }
.print-page .page-deco.deco-bl { left: 0.4in; }
.print-page .page-deco.deco-br { right: 0.4in; }
.print-page .print-footer { margin-top: .3rem; padding-top: .25rem; font-size: .65rem; }

/* ─────────────────────────────────────────────────────────────
   Print page chrome
   ───────────────────────────────────────────────────────────── */

.print-page {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 8.5in;
  margin: 0 auto;
  padding: 0.55in;
  background: var(--page-bg, #ffffff);
  min-height: 11in;
  box-shadow: 0 0 12px rgba(0,0,0,.05);
  /* Theme defaults; per-theme blocks below override these. */
  --c1: #FF6EB4; --c2: #FFD93D; --c3: #4FC3F7; --c4: #81C784; --c5: #CE93D8;
  --c1-bg: #ffe4f1; --c2-bg: #fff7c2; --c3-bg: #d6f0fc; --c4-bg: #dcf0db; --c5-bg: #ecdcf0;
  --c1-dark: #b03b78; --c2-dark: #a87c00; --c3-dark: #0a6e96; --c4-dark: #3b6e3f; --c5-dark: #794b86;
  --header-bg: #fff7c2;
  --header-stroke: #d4af1f;
  --accent: #FF6EB4;
  --tag-color: #b03b78;
}
/* Push the brand footer to the very bottom of the page regardless of how
   much content sits above it, so it always reads as the page's bottom
   line. Works in both preview and print since .print-page is a flex
   column that fills its container's min-height. */
.print-page .print-footer { margin-top: auto; }

/* Theme banner: framed strip across the top of the print page, contained
   within the page padding rather than bleeding to the edges. The border
   + radius + faint inner-shadow visually tie the artwork to the page
   chrome so it reads as part of the layout, not pasted on. */
.theme-banner {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
  margin: 0 auto .85rem;
  border: 2.5px solid var(--header-stroke);
  border-radius: 14px;
  background: var(--header-bg);
  box-shadow: 0 2px 0 rgba(0,0,0,.04);
}

/* Bottom-corner motifs (real images, not SVG) - sit ABOVE the footer's
   dashed border so the line doesn't cut through the illustration. Bottom
   inset matches the page padding so the motif stays inside the printable
   area instead of bleeding into the page-margin gutter. */
.page-deco {
  position: absolute;
  width: 0.95in;
  height: 0.95in;
  pointer-events: none;
  object-fit: contain;
  opacity: 0.95;
  z-index: 2;
}
.page-deco.deco-bl { bottom: 0.55in; left: 0.55in; }
.page-deco.deco-br { bottom: 0.55in; right: 0.55in; }

/* Unified hero card: title + banner illustration + tagline share ONE
   themed frame so the routine name reads as part of the page, not as
   text floating above an unrelated illustration. */
.print-hero {
  position: relative;
  margin: 0 0 1rem;
  border: 3px solid var(--header-stroke);
  border-radius: 16px;
  background: var(--header-bg);
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.print-hero-text {
  text-align: center;
  padding: .85rem 1rem .7rem;
}
.print-hero .page-title {
  margin: 0;
  line-height: 1;
}
/* Routine name lives in a filled accent pill (same treatment the old
   "Today I will…" tag used) so it reads as a deliberate badge. */
.print-hero .page-title .page-title-pill {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.1;
  padding: .35rem 1.4rem .45rem;
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0,0,0,.08);
}
.print-hero .page-subtitle {
  margin: .45rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--header-text);
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .75;
}
.print-hero .theme-banner {
  display: block;
  width: 100%;
  /* Source banner files are baked as 3:1 strips so figures (heads + feet)
     fit without clipping. Display at 3:1 matches the source exactly - no
     further cover-crop needed. */
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
/* Legacy .print-header rules retained so anything still using them
   doesn't break, but the new hero owns the main visual. */
.print-header {
  position: relative;
  text-align: center;
  padding: .5rem 1rem .6rem;
  margin-bottom: .85rem;
}
.print-header h1 {
  font-size: 2.4rem;
  font-weight: 800;
  margin: 0;
  color: var(--header-text, #3D2B1F);
  letter-spacing: .01em;
}
.print-header .child {
  font-size: 1.1rem;
  color: var(--header-text, #3D2B1F);
  opacity: .85;
  margin: .25rem 0 0;
  font-style: italic;
}
.print-header .daily-tag {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tag-color);
  margin: .35rem 0 0;
  letter-spacing: .03em;
}
.print-header .header-flair {
  position: absolute;
  inset: -8px;
  border-radius: 16px;
  border: 2px dashed var(--header-stroke);
  opacity: .35;
  pointer-events: none;
}

.print-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .35rem;
  padding-top: .75rem;
  margin-top: 1.5rem;
  color: #666;
  font-size: .82rem;
  position: relative;
}
.print-footer img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.print-footer .footer-brand { font-weight: 800; }

/* Star SVG check + reward */
.star-svg { width: 100%; height: 100%; display: block; }

/* ─────────────────────────────────────────────────────────────
   Daily view
   ───────────────────────────────────────────────────────────── */
.daily-items { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; gap: .85rem; position: relative; }
.daily-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .65rem .85rem;
  border: 2.5px solid var(--row-stroke, #444);
  border-radius: 14px;
  background: var(--row-bg, #fff);
  position: relative;
}
.daily-item .item-num {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--row-stroke, #444);
  /* --num-fg defaults to white but Color Me items override it inline so
     the number stays readable against the inverted number-circle color. */
  color: var(--num-fg, #fff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.15rem;
}
.daily-item img { width: 80px; height: 80px; object-fit: contain; flex-shrink: 0; }
.daily-item .label { flex: 1; font-size: 1.55rem; font-weight: 800; color: var(--row-stroke, #333); }
.daily-item .check {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--row-stroke, #444);
}

/* Color cycle on daily items */
.daily-item.color-0 { --row-bg: var(--c1-bg); --row-stroke: var(--c1-dark); }
.daily-item.color-1 { --row-bg: var(--c2-bg); --row-stroke: var(--c2-dark); }
.daily-item.color-2 { --row-bg: var(--c3-bg); --row-stroke: var(--c3-dark); }
.daily-item.color-3 { --row-bg: var(--c4-bg); --row-stroke: var(--c4-dark); }
.daily-item.color-4 { --row-bg: var(--c5-bg); --row-stroke: var(--c5-dark); }

/* Reward strip at the bottom of the daily view */
.daily-reward {
  margin-top: 1.5rem;
  padding: .85rem 1rem;
  border: 2.5px dashed var(--accent);
  border-radius: 14px;
  background: var(--reward-bg, #fffbe9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}
.daily-reward .reward-sticker {
  width: 90px;
  height: 90px;
  object-fit: contain;
  flex-shrink: 0;
}
.daily-reward .reward-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}
.daily-reward .reward-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--tag-color);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.daily-reward .reward-stars {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  color: var(--accent);
  max-width: 100%;
}
.daily-reward .reward-stars .star-svg { width: 36px; height: 36px; }

/* ─────────────────────────────────────────────────────────────
   Habit tracker
   ───────────────────────────────────────────────────────────── */
.tracker-table { width: 100%; border-collapse: separate; border-spacing: 4px; margin-top: 1.25rem; }
.tracker-table th, .tracker-table td {
  padding: .45rem .35rem;
  text-align: center;
  vertical-align: middle;
  background: #fff;
  border: 2px solid var(--row-stroke, #aaa);
  border-radius: 8px;
}
.tracker-table tr.tracker-days th { font-weight: 800; font-size: .95rem; }
.tracker-table tr.tracker-days th.color-0 { background: var(--c1-bg); --row-stroke: var(--c1-dark); color: var(--c1-dark); }
.tracker-table tr.tracker-days th.color-1 { background: var(--c2-bg); --row-stroke: var(--c2-dark); color: var(--c2-dark); }
.tracker-table tr.tracker-days th.color-2 { background: var(--c3-bg); --row-stroke: var(--c3-dark); color: var(--c3-dark); }
.tracker-table tr.tracker-days th.color-3 { background: var(--c4-bg); --row-stroke: var(--c4-dark); color: var(--c4-dark); }
.tracker-table tr.tracker-days th.color-4 { background: var(--c5-bg); --row-stroke: var(--c5-dark); color: var(--c5-dark); }
.tracker-table tr.row-0 td { background: #ffffff; }
.tracker-table tr.row-1 td { background: var(--row-stripe, #fff8ee); }
.tracker-table td.first {
  text-align: left;
  padding-left: .7rem;
  font-weight: 700;
}
.tracker-table .item-cell img { width: 36px; height: 36px; object-fit: contain; vertical-align: middle; margin-right: .45rem; }
.tracker-check {
  display: inline-block;
  width: 30px;
  height: 30px;
  color: var(--accent);
  opacity: .55;
}

/* ─────────────────────────────────────────────────────────────
   Weekly schedule - vertical day strips instead of cramped columns
   ───────────────────────────────────────────────────────────── */
.schedule-grid {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: 1rem;
}
.schedule-day {
  display: grid;
  grid-template-columns: 1.2in 1fr;
  border: 2px solid var(--row-stroke, #ccc);
  background: var(--row-bg, #fff);
  border-radius: 12px;
  overflow: hidden;
}
.schedule-day.color-0 { --row-bg: #fff; --row-stroke: var(--c1-dark); --row-tint: var(--c1-bg); }
.schedule-day.color-1 { --row-bg: #fff; --row-stroke: var(--c2-dark); --row-tint: var(--c2-bg); }
.schedule-day.color-2 { --row-bg: #fff; --row-stroke: var(--c3-dark); --row-tint: var(--c3-bg); }
.schedule-day.color-3 { --row-bg: #fff; --row-stroke: var(--c4-dark); --row-tint: var(--c4-bg); }
.schedule-day.color-4 { --row-bg: #fff; --row-stroke: var(--c5-dark); --row-tint: var(--c5-bg); }
.schedule-day-head {
  background: var(--row-stroke);
  color: #fff;
  padding: .45rem .55rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
}
.schedule-day-head h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
}
.schedule-day-head .schedule-special {
  background: rgba(255,255,255,.92);
  color: var(--row-stroke);
  padding: .15rem .4rem;
  border-radius: 999px;
  margin-bottom: 0;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
}
.schedule-day-head .schedule-special img { width: 18px; height: 18px; }
.schedule-day-head .schedule-special span { color: var(--row-stroke); font-size: .72rem; }
.schedule-day-body {
  background: var(--row-tint, #fafafa);
  padding: .45rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.schedule-routine { padding: 0; border: none; margin: 0; }
.schedule-routine .name {
  font-size: .82rem;
  font-weight: 800;
  color: var(--row-stroke);
  margin-bottom: .2rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.schedule-routine .strip {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .7rem;
}
.schedule-routine .strip li {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .78rem;
  font-weight: 600;
  color: #444;
}
.schedule-routine .strip img { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }

/* Drag-and-drop affordances in the builder preview (no effect on print). */
.schedule-routine.is-draggable { cursor: grab; transition: opacity .15s, transform .15s; }
.schedule-routine.is-draggable:active { cursor: grabbing; }
.schedule-routine.dragging { opacity: .4; }
.schedule-day.drop-target { outline: 3px dashed var(--color-accent); outline-offset: -2px; background: #edfbf9; }

.schedule-empty {
  font-size: .82rem;
  color: #999;
  text-align: center;
  font-style: italic;
  margin: 0;
  padding: .2rem 0;
}

/* In print mode the daily/tracker views still get the single-page treatment
   above; the schedule needs its own tweak so all 7 day strips fit. */
@media print {
  .schedule-day { grid-template-columns: 0.9in 1fr; }
  .schedule-day-head h4 { font-size: .9rem; }
  .schedule-day-body { padding: .3rem .5rem; gap: .2rem; }
  .schedule-routine .name { font-size: .7rem; }
  .schedule-routine .strip li { font-size: .68rem; gap: .15rem; }
  .schedule-routine .strip img { width: 20px; height: 20px; }
  .schedule-routine .strip { gap: .25rem .5rem; }
}

/* ─────────────────────────────────────────────────────────────
   THEMES - override page palette / header / accent.
   ───────────────────────────────────────────────────────────── */

/* Confetti (default) */
.theme-confetti {
  --page-bg: #ffffff;
  --c1: #FF6EB4; --c2: #FFD93D; --c3: #4FC3F7; --c4: #81C784; --c5: #CE93D8;
  --c1-bg: #ffe4f1; --c2-bg: #fff7c2; --c3-bg: #d6f0fc; --c4-bg: #dcf0db; --c5-bg: #ecdcf0;
  --c1-dark: #b03b78; --c2-dark: #a87c00; --c3-dark: #0a6e96; --c4-dark: #3b6e3f; --c5-dark: #794b86;
  --header-bg: #fff2f8;
  --header-stroke: #FF6EB4;
  --header-text: #6a1f4a;
  --accent: #FF6EB4;
  --tag-color: #b03b78;
  --row-stripe: #fff7fb;
}

/* Sunshine */
.theme-sunshine {
  --page-bg: #ffffff;
  --c1: #FFB347; --c2: #FFD93D; --c3: #FF8A65; --c4: #FF6EB4; --c5: #FFA8A8;
  --c1-bg: #fff0d4; --c2-bg: #fff7c2; --c3-bg: #ffe3da; --c4-bg: #ffe4f1; --c5-bg: #ffe9e9;
  --c1-dark: #b06b00; --c2-dark: #a87c00; --c3-dark: #a04a2a; --c4-dark: #b03b78; --c5-dark: #a8463a;
  --header-bg: #fff7c2;
  --header-stroke: #E89F00;
  --header-text: #7a4e00;
  --accent: #E89F00;
  --tag-color: #b06b00;
  --row-stripe: #fff7e0;
}

/* Space */
.theme-space {
  --page-bg: #ffffff;
  --c1: #7B68EE; --c2: #4FC3F7; --c3: #CE93D8; --c4: #FFD93D; --c5: #FF8A65;
  --c1-bg: #e0dbff; --c2-bg: #d6f0fc; --c3-bg: #ecdcf0; --c4-bg: #fff7c2; --c5-bg: #ffe3da;
  --c1-dark: #3D2B6A; --c2-dark: #0a6e96; --c3-dark: #794b86; --c4-dark: #a87c00; --c5-dark: #a04a2a;
  --header-bg: #e0dbff;
  --header-stroke: #3D2B6A;
  --header-text: #2a1d4f;
  --accent: #7B68EE;
  --tag-color: #3D2B6A;
  --row-stripe: #f0ecff;
}

/* Underwater */
.theme-underwater {
  --page-bg: #ffffff;
  --c1: #4FC3F7; --c2: #29B6F6; --c3: #80DEEA; --c4: #FF8A65; --c5: #FFD93D;
  --c1-bg: #d6f0fc; --c2-bg: #cce9f8; --c3-bg: #d9f4f6; --c4-bg: #ffe3da; --c5-bg: #fff7c2;
  --c1-dark: #0a6e96; --c2-dark: #006580; --c3-dark: #1f7a82; --c4-dark: #a04a2a; --c5-dark: #a87c00;
  --header-bg: #d6f0fc;
  --header-stroke: #0288A6;
  --header-text: #023b4f;
  --accent: #0288A6;
  --tag-color: #006580;
  --row-stripe: #eaf6fb;
}

/* Forest */
.theme-forest {
  --page-bg: #ffffff;
  --c1: #81C784; --c2: #A1887F; --c3: #FFD93D; --c4: #E57373; --c5: #C5E1A5;
  --c1-bg: #dcf0db; --c2-bg: #ece1dd; --c3-bg: #fff7c2; --c4-bg: #ffe1e1; --c5-bg: #ecf5dc;
  --c1-dark: #3b6e3f; --c2-dark: #5c453d; --c3-dark: #a87c00; --c4-dark: #7E2A2A; --c5-dark: #4d6b29;
  --header-bg: #dcf0db;
  --header-stroke: #3b6e3f;
  --header-text: #28461a;
  --accent: #3b6e3f;
  --tag-color: #28461a;
  --row-stripe: #effaeb;
}

/* Hearts */
.theme-hearts {
  --page-bg: #ffffff;
  --c1: #FF6EB4; --c2: #FFB3D1; --c3: #E57373; --c4: #CE93D8; --c5: #FFD93D;
  --c1-bg: #ffe4f1; --c2-bg: #ffeaf3; --c3-bg: #ffe1e1; --c4-bg: #ecdcf0; --c5-bg: #fff7c2;
  --c1-dark: #b03b78; --c2-dark: #a13a78; --c3-dark: #7E2A2A; --c4-dark: #794b86; --c5-dark: #a87c00;
  --header-bg: #ffe4f1;
  --header-stroke: #FF6EB4;
  --header-text: #6a1f4a;
  --accent: #E57373;
  --tag-color: #b03b78;
  --row-stripe: #fff0f8;
}

/* Unicorn */
.theme-unicorn {
  --page-bg: #ffffff;
  --c1: #FF6EB4; --c2: #FFD93D; --c3: #81C784; --c4: #4FC3F7; --c5: #CE93D8;
  --c1-bg: #ffe4f1; --c2-bg: #fff7c2; --c3-bg: #dcf0db; --c4-bg: #d6f0fc; --c5-bg: #ecdcf0;
  --c1-dark: #b03b78; --c2-dark: #a87c00; --c3-dark: #3b6e3f; --c4-dark: #0a6e96; --c5-dark: #794b86;
  --header-bg: #ecdcf0;
  --header-stroke: #CE93D8;
  --header-text: #5b3370;
  --accent: #CE93D8;
  --tag-color: #794b86;
  --row-stripe: #fff5fc;
}

/* Mermaid */
.theme-mermaid {
  --page-bg: #ffffff;
  --c1: #4FC3F7; --c2: #80DEEA; --c3: #FFB3D1; --c4: #FF8A65; --c5: #FFD93D;
  --c1-bg: #d6f0fc; --c2-bg: #d9f4f6; --c3-bg: #ffeaf3; --c4-bg: #ffe3da; --c5-bg: #fff7c2;
  --c1-dark: #0a6e96; --c2-dark: #1f7a82; --c3-dark: #a13a78; --c4-dark: #A04A2A; --c5-dark: #a87c00;
  --header-bg: #d9f4f6;
  --header-stroke: #1f7a82;
  --header-text: #0c3b3f;
  --accent: #FF8A65;
  --tag-color: #a13a78;
  --row-stripe: #ecf9fb;
}

/* Dinosaur */
.theme-dinosaur {
  --page-bg: #ffffff;
  --c1: #81C784; --c2: #FFB347; --c3: #8D6E63; --c4: #FFD93D; --c5: #A1887F;
  --c1-bg: #dcf0db; --c2-bg: #fff0d4; --c3-bg: #efe2dd; --c4-bg: #fff7c2; --c5-bg: #ece1dd;
  --c1-dark: #3b6e3f; --c2-dark: #b06b00; --c3-dark: #4e3a32; --c4-dark: #a87c00; --c5-dark: #5c453d;
  --header-bg: #ecf5dc;
  --header-stroke: #3b6e3f;
  --header-text: #2c4a18;
  --accent: #b06b00;
  --tag-color: #4e3a32;
  --row-stripe: #f3f8e8;
}

/* Trucks (construction) */
.theme-trucks {
  --page-bg: #ffffff;
  --c1: #FFB347; --c2: #FFD93D; --c3: #4FC3F7; --c4: #E57373; --c5: #A1887F;
  --c1-bg: #fff0d4; --c2-bg: #fff7c2; --c3-bg: #d6f0fc; --c4-bg: #ffe1e1; --c5-bg: #ece1dd;
  --c1-dark: #b06b00; --c2-dark: #a87c00; --c3-dark: #0a6e96; --c4-dark: #7E2A2A; --c5-dark: #5c453d;
  --header-bg: #fff0d4;
  --header-stroke: #E89F00;
  --header-text: #5c3d00;
  --accent: #E89F00;
  --tag-color: #b06b00;
  --row-stripe: #fff7df;
}

/* Science (lab) */
.theme-science {
  --page-bg: #ffffff;
  --c1: #7B68EE; --c2: #4FC3F7; --c3: #FFD93D; --c4: #81C784; --c5: #FF6EB4;
  --c1-bg: #e0dbff; --c2-bg: #d6f0fc; --c3-bg: #fff7c2; --c4-bg: #dcf0db; --c5-bg: #ffe4f1;
  --c1-dark: #3D2B6A; --c2-dark: #0a6e96; --c3-dark: #a87c00; --c4-dark: #3b6e3f; --c5-dark: #b03b78;
  --header-bg: #e0dbff;
  --header-stroke: #7B68EE;
  --header-text: #2a1d4f;
  --accent: #7B68EE;
  --tag-color: #3D2B6A;
  --row-stripe: #f1ecff;
}

/* Knights (dragons + medieval) */
.theme-knights {
  --page-bg: #ffffff;
  --c1: #B0BEC5; --c2: #FFD93D; --c3: #E57373; --c4: #7B68EE; --c5: #FF8A65;
  --c1-bg: #e6ebee; --c2-bg: #fff7c2; --c3-bg: #ffe1e1; --c4-bg: #e0dbff; --c5-bg: #ffe3da;
  --c1-dark: #4e6772; --c2-dark: #a87c00; --c3-dark: #7E2A2A; --c4-dark: #3D2B6A; --c5-dark: #A04A2A;
  --header-bg: #e6ebee;
  --header-stroke: #4e6772;
  --header-text: #29363c;
  --accent: #E57373;
  --tag-color: #7E2A2A;
  --row-stripe: #f3f6f8;
}

/* Color Me — a usable sheet with an EMPTY banner box at the top for the
   kid to draw / color their own scene. Item boxes default to WHITE with
   gray outlines (a blank canvas); the per-item color picker fills them in.
   Icons keep their colors. No corner motifs or reward sticker. */
.theme-blank {
  --page-bg: #ffffff;
  --c1: #999; --c2: #999; --c3: #999; --c4: #999; --c5: #999;
  --c1-bg: #fff; --c2-bg: #fff; --c3-bg: #fff; --c4-bg: #fff; --c5-bg: #fff;
  --c1-dark: #bbb; --c2-dark: #bbb; --c3-dark: #bbb; --c4-dark: #bbb; --c5-dark: #bbb;
  --header-bg: #ffffff;
  --header-stroke: #bbb;
  --header-text: #333;
  --accent: #888;
  --tag-color: #666;
  --row-stripe: #fbfbfb;
}
/* The blank banner space — an empty bordered box to color in. */
.theme-banner--blank {
  width: 100%;
  aspect-ratio: 3 / 1;
  background: #fff;
  border: 2px dashed #c9c9c9;
  border-radius: 8px;
}

/* Mae & Friends — the brand-character theme in Mae Adventures' core
   palette. Art assets pending (art:false) until the character banner /
   motifs / sticker are generated. */
.theme-characters {
  --page-bg: #ffffff;
  --c1: #FF6EB4; --c2: #FFD93D; --c3: #1FBDB2; --c4: #81C784; --c5: #CE93D8;
  --c1-bg: #ffe4f1; --c2-bg: #fff7c2; --c3-bg: #d6f4f1; --c4-bg: #dcf0db; --c5-bg: #ecdcf0;
  --c1-dark: #b03b78; --c2-dark: #a87c00; --c3-dark: #0e8a82; --c4-dark: #3b6e3f; --c5-dark: #794b86;
  --header-bg: #fff2f8;
  --header-stroke: #FF6EB4;
  --header-text: #6a1f4a;
  --accent: #1FBDB2;
  --tag-color: #b03b78;
  --row-stripe: #fff7fb;
}

/* Starry Night — stars + moon, dreamy indigo/gold. Art pending (art:false). */
.theme-starry {
  --page-bg: #ffffff;
  --c1: #3D2B6A; --c2: #7B68EE; --c3: #4FC3F7; --c4: #FFD93D; --c5: #CE93D8;
  --c1-bg: #e3e0f3; --c2-bg: #e0dbff; --c3-bg: #d6f0fc; --c4-bg: #fff7c2; --c5-bg: #ecdcf0;
  --c1-dark: #2a1d4f; --c2-dark: #3D2B6A; --c3-dark: #0a6e96; --c4-dark: #a87c00; --c5-dark: #794b86;
  --header-bg: #e3e0f3;
  --header-stroke: #3D2B6A;
  --header-text: #221643;
  --accent: #3D2B6A;
  --tag-color: #2a1d4f;
  --row-stripe: #f1eefb;
}

/* ── Weekly specials (rotation icons: music / art / gym / stem / library) ── */

/* Weekly-event editor (in builder.html) - one row per weekday, edited via
   the same modal that routine items use. Mirrors .item-card so the two
   editors feel consistent. */
.specials-picker { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.event-row {
  display: grid;
  grid-template-columns: 5.5rem 38px 1fr auto auto;
  align-items: center;
  gap: .65rem;
  padding: .55rem .75rem;
  border: 1.5px solid #e3e3e3;
  border-radius: 8px;
  background: #fff;
}
.event-row--empty { background: #fafafa; }
.event-row .event-day {
  font-size: .9rem;
  font-weight: 800;
  color: #444;
  letter-spacing: .02em;
}
.event-row .event-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
}
.event-row .event-icon--blank {
  display: block;
  border: 1.5px dashed #ccc;
  border-radius: 6px;
  background: #fafafa;
}
.event-row .event-label {
  font-weight: 700;
  font-size: .95rem;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-row .event-add {
  grid-column: 2 / -1;
  justify-self: start;
  padding: .45rem .85rem;
  background: #fff;
  border: 1.5px dashed #bbb;
  border-radius: 6px;
  color: #888;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.event-row .event-add:hover { border-color: var(--color-accent); color: var(--color-accent); background: #e9faf8; }
.event-row .event-edit,
.event-row .event-clear {
  background: none;
  border: none;
  color: #888;
  font-size: 1rem;
  cursor: pointer;
  padding: .25rem .4rem;
}
.event-row .event-edit:hover { color: var(--color-accent); }
.event-row .event-clear:hover { color: #c62828; }
@media (max-width: 520px) {
  .event-row { grid-template-columns: 4rem 32px 1fr auto auto; gap: .4rem; padding: .45rem .55rem; }
}

/* Collapsible builder sections (<details> + <summary>) */
.builder-collapse { margin-bottom: 1rem; border: 1.5px solid #e3e3e3; border-radius: 8px; background: #fafafa; padding: 0; }
.builder-collapse > summary {
  list-style: none;
  cursor: pointer;
  padding: .65rem .85rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 700;
  color: #444;
  border-radius: 8px;
  user-select: none;
}
.builder-collapse > summary::-webkit-details-marker { display: none; }
.builder-collapse > summary::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #888;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.builder-collapse[open] > summary::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px var(--color-accent);
}
.builder-collapse > summary .collapse-title { font-weight: 800; color: #333; }
.builder-collapse > summary .collapse-hint { font-weight: 400; color: #888; font-size: .78rem; }
.builder-collapse[open] > summary { border-bottom: 1.5px solid #e3e3e3; border-radius: 8px 8px 0 0; background: #fff; }
.builder-collapse > .specials-picker { padding: .65rem .85rem .85rem; }

/* Theme picker (in builder.html) - compact swatches matching the icon
   picker tile scale. Each swatch is a small banner thumb + name pill. */
.theme-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: .3rem; }
@media (max-width: 600px) { .theme-picker { grid-template-columns: repeat(4, 1fr); } }
.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 1.5px solid #e3e3e3;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  transition: border-color .12s, box-shadow .12s;
}
.theme-swatch:hover { border-color: #bbb; }
.theme-swatch.selected { border-color: var(--color-accent); box-shadow: 0 0 0 1.5px var(--color-accent) inset; }
.theme-swatch .theme-swatch-banner {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  object-position: center;
}
/* Blank-theme swatch: a white box with a dashed outline + pencil glyph
   instead of a banner image. */
.theme-swatch .theme-swatch-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 1;
  background: repeating-linear-gradient(45deg, #fff, #fff 6px, #f4f4f4 6px, #f4f4f4 12px);
  border-bottom: 1.5px dashed #bbb;
  color: #999;
  font-size: 1rem;
}
.theme-swatch .theme-name {
  font-size: .62rem;
  font-weight: 800;
  color: #555;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .18rem .15rem;
  text-align: center;
  background: var(--swatch-tint, #fafafa);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Theme-tinted name strip - matches each theme's accent palette so the
   swatch reads as a mini print page. */
.theme-swatch.theme-confetti   { --swatch-tint: #ffe4f1; }
.theme-swatch.theme-sunshine   { --swatch-tint: #fff7c2; }
.theme-swatch.theme-space      { --swatch-tint: #e0dbff; }
.theme-swatch.theme-underwater { --swatch-tint: #d6f0fc; }
.theme-swatch.theme-forest     { --swatch-tint: #dcf0db; }
.theme-swatch.theme-hearts     { --swatch-tint: #ffe4f1; }
.theme-swatch.theme-unicorn    { --swatch-tint: #ecdcf0; }
.theme-swatch.theme-mermaid    { --swatch-tint: #d9f4f6; }
.theme-swatch.theme-dinosaur   { --swatch-tint: #ecf5dc; }
.theme-swatch.theme-trucks     { --swatch-tint: #fff0d4; }
.theme-swatch.theme-science    { --swatch-tint: #e0dbff; }
.theme-swatch.theme-knights    { --swatch-tint: #e6ebee; }
@media (max-width: 520px) { .theme-picker { gap: .25rem; } .theme-swatch .theme-motif { width: 28px; height: 28px; } }

/* Daily-view specials strip */
.specials-strip { margin: .9rem 0 0; padding: .55rem .65rem; border: 1.5px dashed #d4af1f; border-radius: 10px; background: #fffbe9; }
.specials-strip .specials-label { font-size: .78rem; font-weight: 800; color: #8a7300; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; text-align: center; }
.specials-strip .specials-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.specials-strip .specials-cell { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .25rem; }
.specials-strip .specials-cell.empty { opacity: .35; }
.specials-strip .specials-cell .day { font-size: .72rem; font-weight: 800; color: #555; }
.specials-strip .specials-cell img { width: 40px; height: 40px; object-fit: contain; }
.specials-strip .specials-cell .label { font-size: .75rem; font-weight: 700; }

/* Tracker-view specials row */
.tracker-table tr.tracker-specials th { background: #fffbe9; padding: .15rem; }
.tracker-table tr.tracker-specials th img { width: 28px; height: 28px; object-fit: contain; vertical-align: middle; }

/* Schedule-view specials badge */
.schedule-special { display: flex; flex-direction: column; align-items: center; gap: .15rem; margin-bottom: .4rem; padding: .25rem; background: #fffbe9; border-radius: 5px; }
.schedule-special img { width: 28px; height: 28px; object-fit: contain; }
.schedule-special span { font-size: .68rem; font-weight: 800; color: #8a7300; }