/* WitchFeast: parchment, pressed flowers, and a little kitchen magic.
   Layout primitives live in app.css; all brand surfaces live here. */
:root {
  --ink: #35283e; --muted: #6d5d73; --green: #623f78; --green-dark: #452654;
  --sage: #eee4f2; --cream: #faf6ef; --line: #e4dbe3; --peach: #f5e5d4; --white: #fffdf9;
  --lavender: #ddcce8; --gold: #a8783d; --bs-body-bg: var(--cream);
  --bs-body-color: var(--ink); --bs-primary: #623f78;
  --bs-body-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
body.witchfeast {
  background-color: var(--cream);
  background-image: radial-gradient(ellipse at 4% 8%, #eaddf04d, transparent 38%), radial-gradient(ellipse at 95% 45%, #f6e4cd55, transparent 32%);
  font-size: 15px; line-height: 1.65;
}
h1,h2,h3 { color: var(--ink); overflow-wrap: break-word; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.035em; }
h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 400; }
h3 { letter-spacing: -.015em; }
:focus-visible { outline: 3px solid #99702e !important; outline-offset: 4px; }
::selection { background: #ddcce8; color: #35283e; }
.eyebrow { color: #80638c; font-size: 10px; letter-spacing: .16em; }
.tiny-star { color: var(--gold); font-size: 17px; margin-right: 8px; }
.btn { border-radius: 10px; padding: 11px 18px; font-size: 13px; transition: background .15s, box-shadow .15s, transform .15s; }
.btn-primary { background: #623f78; border-color: #623f78; box-shadow: 0 3px 0 #422651; }
.btn-primary:hover,.btn-primary:active,.btn-primary:focus-visible { background: #4c2c60; border-color: #4c2c60; color: #fff; box-shadow: 0 3px 0 #35203f; }
.btn-secondary { background: #fffdf9; border-color: #d9cadc; }
.btn-secondary:hover { background: #eee4f2; border-color: #b79cc3; }
.btn-icon { border-color: var(--line); box-shadow: none; }
.btn-lg { padding: 16px 25px; }
.btn-sm { padding: 8px 13px; }
html { scroll-padding-top: 110px; }
.site-header { position: sticky; top: 0; z-index: 30; background: #fffcf7f2; height: 90px; border-color: #e3d9e3; }
.header-inner { max-width: 1440px; }
.brand { gap: 10px; font-family: Georgia, serif; font-weight: 700; font-size: 31px; letter-spacing: -1.5px; color: #492e5b; white-space: nowrap; }
.brand:hover { color: #492e5b; }
.brand-feast { font-weight: 400; }
.brand-spark { display: inline-block; font-size: 16px; vertical-align: top; margin: 2px 0 0 4px; color: var(--gold); }
.brand-mark { width: 44px; height: 44px; justify-content: center; color: #fbe8c8; background: #563569; border-radius: 15px 15px 18px 18px; transform: rotate(-5deg); }
.brand-mark .icon { width: 32px; height: 32px; }
.desktop-nav { gap: 8px; }
.desktop-nav a { border-radius: 25px; font-weight: 500; padding: 11px 17px; }
.desktop-nav a[aria-current] { background: #eee4f2; color: #563569; box-shadow: inset 0 0 0 1px #e0cfe9; }
.avatar { background: #ecdfef; color: #684579; border: 1px solid #d9c4e2; width: 38px; height: 38px; }
.profile-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-shell { max-width: 1440px; padding-top: 38px; }
.site-footer { max-width: 1352px; border-color: #e4dbe3; }
.footer-motto { display: inline-flex; align-items: center; gap: 10px; }
.footer-motto>span { font-size: 23px; color: var(--gold); }
.version>span { color: var(--gold); padding: 0 5px; }
.page-heading { margin-bottom: 30px; }
.page-heading h1 { font-size: clamp(32px, 3.2vw, 45px); }
.panel,.auth-card,.import-card { background: #fffdf9; border-color: var(--line); border-radius: 17px; box-shadow: 0 5px 18px #42265104; }
.panel { padding: 27px; }
.chip { background: #eee4f2; color: #69497b; border: 1px solid #e2d3e8; border-radius: 20px; padding: 3px 10px; }
.tag-row { gap: 6px; }
.field label,form>label { font-size: 13px; font-weight: 500; }
.field input:not([type=checkbox]),.field select,.field textarea,.inline-form input:not([type=checkbox]),.filter-bar input,.filter-bar select,.export-panel select {
  border-color: #d9cddb; background-color: #fffefa; border-radius: 9px; font-size: 14px;
}
/* Keep native select arrows visible even when Bootstrap's form styles are present. */
.field select,.filter-bar select,.export-panel select {
  appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%2368497b' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.field input:focus,.field textarea:focus,.field select:focus { border-color: #9b7eac; box-shadow: 0 0 0 3px #d6bee833; }
.help-text { font-size: 12px; }
.required { color: #8c6431; }
.notice { background: #fcf0d9; border-color: #e9d3ac; color: #73552c; }
.notice.success { background: #eff3e6; border-color: #cbd8b9; color: #4d653d; }
.notice.error { background: #fbe9e9; border-color: #dfb8c0; color: #923e54; }
.danger-link,.errorlist,.field-errors { color: #a13c58 !important; }
.empty-state { background: #f2ebf4; border: 1px dashed #cdb6d6; border-radius: 20px; }
.empty-state h2 { font-size: 30px; }
.empty-icon { background: #e8daee; color: #77508b; border-radius: 50% 50% 42% 42%; }
.empty-state .empty-icon { width: 95px; height: 95px; }
.empty-art { display: block; width: 180px; height: 140px; margin: -15px auto 12px; object-fit: contain; }
.auth-card { position: relative; border-top: 4px solid #b69ac7; }
.auth-card .eyebrow { margin-top: 2px; }
.auth-card h1 { font-size: 36px; }
.auth-intro { padding-top: 20px; }
.auth-intro h1,.auth-intro h2 { font-size: 54px; line-height: 1.15; letter-spacing: -.035em; }
.auth-intro p:not(.eyebrow) { font-size: 17px; }
.auth-art { max-width: 370px; width: 100%; height: auto; display: block; margin-top: 12px; }
.auth-layout { align-items: start; gap: 65px; margin-top: 28px; }
.auth-layout .auth-card { margin-top: 32px; }
.auth-foot { border-color: #e4dbe3; }
.landing-hero { grid-template-columns: 1fr 1.05fr; gap: 45px; padding: 20px 0 60px; }
.hero-copy { padding: 20px 0; }
.hero-copy h1 { font-size: clamp(58px, 6.6vw, 88px); line-height: 1.05; margin-top: 19px; margin-bottom: 28px; }
.hero-copy h1 em { color: #7e568e; font-weight: 400; }
.hero-description { max-width: 490px; font-size: 17px; line-height: 1.85; }
.hero-reassurance { font-size: 12px; color: #756078; margin-top: 22px; }
.witch-hero-art { position: relative; text-align: center; padding-top: 15px; }
.witch-hero-art>img { display: block; width: 100%; height: auto; }
.art-caption { color: #785980; letter-spacing: .18em; font-size: 9px; }
.hero-note { display: inline-flex; align-items: center; gap: 13px; background: #fffaf2; border: 1px solid #e2d0dc; border-radius: 13px; padding: 14px 20px; margin-top: -8px; box-shadow: 0 5px 0 #ede3ec; text-align: left; transform: rotate(-2deg); }
.hero-note>span { color: var(--gold); font-size: 24px; }
.hero-note strong { font-family: Georgia,serif; font-size: 16px; font-weight: 400; display: block; }
.hero-note small { font-size: 11px; color: var(--muted); }
.ritual-divider { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #ddcfdf; padding-top: 20px; color: #8c7491; letter-spacing: .14em; font-size: 9px; }
.ritual-divider>span:last-child { font-size: 22px; letter-spacing: .2em; color: #ae8a58; white-space: nowrap; }
.feature-grid { border: 0; gap: 26px; padding-top: 24px; }
.feature-grid article { padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fffcf7; }
.feature-grid article:nth-child(2) { background: #f1eaf4; }
.feature-grid article:nth-child(3) { background: #f6eee1; }
.feature-icon { display: grid; place-items: center; width: 47px; height: 47px; border: 1px solid #d8c2df; border-radius: 14px; margin-bottom: 25px; background: #fffaf6; color: #765186; transform: rotate(-5deg); }
.feature-icon .icon { width: 26px; height: 26px; }
.feature-number { color: #785e80; font-size: 9px; }
.feature-grid h2 { font-size: 27px; margin: 16px 0; }
.feature-grid p { font-size: 14px; }
.feature-grid article>a { font-size: 12px; font-weight: 600; }
.welcome-strip { display: flex; align-items: center; gap: 24px; margin-top: 55px; padding: 28px 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.welcome-strip>span { font-size: 58px; color: #ac8550; line-height: 1; }
.welcome-strip h2 { margin-bottom: 5px; }
.welcome-strip p { margin: 0; color: var(--muted); font-size: 13px; }
.welcome-strip>a { margin-left: auto; }
.calendar-welcome { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #eee3f1; border: 1px solid #dbc9e3; border-radius: 22px; padding: 29px 34px; margin-bottom: 24px; overflow: hidden; }
.calendar-welcome h1 { font-size: clamp(32px,3vw,44px); margin-bottom: 12px; }
.calendar-welcome p:last-child { margin: 0; color: #786180; }
.calendar-welcome .eyebrow { color: #795086; }
.welcome-art { width: 230px; height: 185px; object-fit: contain; margin: -20px 0 -21px; flex-shrink: 0; }
.calendar-actions { display: flex; gap: 12px; justify-content: flex-end; margin-bottom: 25px; }
.week-summary { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 22px; }
.week-summary strong { color: #654079; }
.summary-dot { background: #91a67d; }
.calendar-toolbar { margin-bottom: 22px; }
.date-navigation h2 { font-family: Georgia,serif; font-size: 22px; font-weight: 400; }
.segmented { background: #eee6ed; border: 1px solid #e1d5e4; border-radius: 9px; padding: 4px; }
.segmented a { font-size: 12px; border-radius: 6px; }
.segmented a[aria-current] { background: #fffdf8; color: #69427b; }
.calendar-grid { border-color: #ddcfe2; background: #fffcf8; border-radius: 16px; }
.day-heading { background: #f7f0f6; border-color: #e2d6e6; padding-top: 17px; }
.day-heading>span { color: #745e7c; }
.is-today .day-heading { background: #e7d9ef; }
.is-today .day-heading strong { background: #76518b; }
.day-content { padding-top: 17px; }
.slot-label { color: #745e7c; font-size: 9px; }
.meal-card { background: #eae0f1; border-left: 3px solid #b08fc4; border-radius: 9px; min-height: 82px; }
.meal-card h3 { color: #513b60; font-size: 12px; font-weight: 600; }
.meal-card span { color: #705579; }
.meal-breakfast { background: #f6ead7; border-color: #d8b580; }
.meal-breakfast h3 { color: #755735; }
.meal-breakfast span { color: #756048; }
.meal-lunch { background: #edf0e3; border-color: #adc095; }
.meal-lunch h3 { color: #51633e; }
.meal-lunch span { color: #596e48; }
.meal-snack { background: #f5e1e4; border-color: #d5a6b2; }
.meal-snack h3 { color: #85515e; }
.meal-snack span { color: #7c535f; }
.meal-card:hover { text-decoration: none; box-shadow: 0 3px 10px #5b3b7414; }
.add-slot { background: #fcf9fc; border-color: #e5d8e9; color: #ae95b7; min-height: 51px; }
.add-slot:hover { background: #eee5f3; color: #684179; }
.add-day-meal { color: #775681; }
.calendar-agenda { background: transparent; }
.calendar-agenda .calendar-day,.calendar-day { border-color: #e4d8e6; }
.calendar-agenda .calendar-day { background: #fffcf8; }
.outside-month { background: #f6f0f6; }
.calendar-footnote .icon { color: #9b78ae; }
.meal-sides { margin: 0 0 14px 8px; padding-left: 7px; border-left: 1px solid var(--line); }
.meal-side { display: block; padding: 8px; margin-bottom: 6px; background: var(--sage); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); overflow-wrap: anywhere; }
.meal-side strong { display: block; font-size: 11px; font-weight: 500; line-height: 1.4; }
.meal-side small { display: block; font-size: 9px; color: var(--muted); }
.side-label { display: block; font-size: 8px; letter-spacing: .1em; color: var(--muted); margin-bottom: 3px; }
.meal-side:hover { color: var(--ink); border-color: var(--green); text-decoration: none; }
.add-slot.add-side { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; font-size: 10px; }
.add-side>span { font-size: 18px; }
.editor-sides,.meal-detail-sides { margin-top: 32px; }
.side-detail { margin-top: 18px; }
.editor-sides .meal-side strong { font-size: 14px; }
.editor-sides .meal-sides { margin-left: 0; }
.calendar-month .meal-sides { margin-left: 2px; padding-left: 4px; }
.calendar-month .meal-side strong { font-size: 10px; }
.grimoire-heading { padding: 8px 0 25px; border-bottom: 1px solid var(--line); }
.grimoire-title { display: flex; align-items: center; gap: 22px; }
.grimoire-title>img { width: 114px; height: 108px; object-fit: contain; transform: rotate(-4deg); }
.grimoire-title h1 { margin-bottom: 0; }
.grimoire-heading .grimoire-actions { flex-shrink: 0; max-width: none; }
.grimoire-search { margin-bottom: 16px; }
.grimoire-search-field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.grimoire-search-field:focus-within { border-color: var(--green); }
.grimoire-search-field input { flex: 1; min-width: 0; width: 100%; min-height: 50px; padding: 12px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-size: 16px; }
.grimoire-search-field button { display: grid; place-items: center; flex-shrink: 0; width: 48px; min-height: 48px; margin-right: 2px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--green); }
.grimoire-search-field button:hover { background: var(--sage); }
.grimoire-browse-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.grimoire-count { margin: 0; color: var(--muted); font-size: 13px; }
.grimoire-filter-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.grimoire-clear { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; }
.grimoire-filters { position: relative; }
.grimoire-filters > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 0 8px 10px; color: var(--green); font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.grimoire-filters > summary::-webkit-details-marker { display: none; }
.grimoire-filters[open] .import-chevron { transform: rotate(180deg); }
.grimoire-filter-status { padding: 0 6px; border-radius: 4px; background: var(--sage); font-size: 11px; }
.grimoire-filter-panel { position: absolute; top: calc(100% + 4px); right: 0; z-index: 9; width: 300px; max-width: calc(100vw - 36px); padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: 0 8px 24px #10091830; }
.grimoire-filter-panel .check-label { min-height: 44px; font-size: 14px !important; }
.grimoire-filter-panel .field input { font-size: 16px; }
.grimoire-filter-panel .btn { width: 100%; margin-top: 16px; }
.filter-bar { background: #eee7f0; border: 1px solid #e3d6e8; border-radius: 12px; }
.recipe-grid { gap: 25px; grid-auto-rows: 1fr; }
.recipe-card { border-color: #dfd0e2; background: #fffcf8; border-radius: 15px; box-shadow: 3px 4px 0 #e8dfe8; }
.recipe-card:hover { box-shadow: 4px 7px 0 #e0d1e5; }
.recipe-card { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.recipe-card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.recipe-card:focus-within { outline: 2px solid var(--green); outline-offset: 4px; }
.recipe-card-link:focus-visible { outline: none !important; }
.recipe-favorite-form { position: relative; z-index: 2; margin: 0 0 0 auto; flex-shrink: 0; }
.favorite-star { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent; border-radius: 50%; background: transparent; color: #85602f; cursor: pointer; line-height: 1; }
.favorite-star svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.favorite-star[aria-pressed="true"] svg { fill: currentColor; }
.favorite-star:hover { background: #f2e4ca; }
.favorite-star:disabled { cursor: wait; opacity: .6; }
.favorite-error { position: absolute; right: 0; bottom: 100%; width: 150px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--ink); font-size: 12px; box-shadow: 0 3px 10px #21152930; }
.favorite-error[hidden] { display: none; }
.recipe-image-link { height: 212px; flex-shrink: 0; }
.recipe-placeholder { background: #e9ddf0; color: #73537f; position: relative; gap: 0; }
.recipe-placeholder img { width: 165px; height: 150px; object-fit: contain; }
.recipe-placeholder span { font-size: 8px; letter-spacing: .16em; }
.recipe-placeholder.color-peach { background: #f3e5d6; color: #936b5b; }
.recipe-card:nth-child(3n) .recipe-placeholder { background: #e5e9dc; }
.recipe-card:nth-child(3n) .recipe-placeholder img { transform: rotate(7deg); }
.recipe-card h2 { font-family: Georgia,serif; font-size: 24px; font-weight: 400; line-height: 1.3; }
.recipe-card-body { padding: 22px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.recipe-card .recipe-meta {
  margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  gap: 8px; min-height: 59px; border-color: #e6dce7; color: #745e7c;
}
.recipe-time { grid-column: 1; }
.recipe-servings { grid-column: 2; }
.recipe-card .recipe-favorite-form { grid-column: 3; grid-row: 1; margin: 0; }
.recipe-meta>a { background: #eee4f2; }
.favorite-mark { background: #fff9f2; color: #ac6a83; }
.detail-art { background: #eaddf0; border: 1px solid #decde6; color: #8c699b; height: 340px; gap: 0; }
.detail-art>img { width: 270px; height: 245px; object-fit: contain; }
.detail-image { height: 340px; border: 1px solid #e2d5df; box-shadow: 6px 6px 0 #eee5ee; }
.recipe-stats { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.recipe-stats strong { font-family: Georgia,serif; }
.ingredient-panel { background: #f0e9f3; border-color: #dfd1e5; }
.ingredient-list li { border-color: #dfd3e5; }
.step-list li>span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #dccae3; background: #eee4f3; border-radius: 50%; color: #785082; font-size: 18px; }
.step-list { margin-top: 24px; }
.notes-box { background: #f7ecd8; border: 1px solid #ebd9bc; border-radius: 14px; }
.notes-box h3 { color: #96753e; }
.ingredient-row { background: #faf6fb; border-color: #e0d4e5; border-radius: 12px; }
.save-bar { background: #faf6eff2; border-color: #e3d6e8; }
.list-icon { background: #f1e5d4; color: #957046; border: 1px solid #e6d6bd; border-radius: 14px; }
.market-heading { display: flex; align-items: center; gap: 23px; }
.market-heading>img { width: 130px; height: 112px; object-fit: contain; }
.shopping-card { box-shadow: 0 4px 0 #e9dfd9; background: #fffcf7; border-color: #e3d5d8; }
.shopping-card:hover { border-color: #b999bb; }
.shopping-card h2 { font-size: 25px; }
.shopping-progress { background: #ede3f2; border-color: #ddcbe5; border-radius: 14px; }
progress,progress::-webkit-progress-bar { background: #d9c6e2; }
progress::-webkit-progress-value { background: #805493; }
.shopping-category h2 { font-size: 21px; }
.shopping-category h2 span { background: #ece0f1; color: #7a5a87; font-family: "Segoe UI",sans-serif; }
.shopping-item { background: #fffdf9; border-color: #e3d9e3; border-radius: 11px; }
.check-button { border-color: #95779f; background: #fffdf9; }
.is-done { background: #f1edf2; }
.export-panel { background: #f6ecde; border-color: #e5d5c2; }
.export-panel .list-icon { background: #fff8eb; }
.export-panel h2 { font-size: 29px; }
.print-sheet { background: #fff; }
.print-sheet .eyebrow { color: #69467d; }
.print-category h2 { font-family: Georgia,serif; }
/* Higher specificity than both legacy field rules and the picker stylesheet. */
.witchfeast .recipe-combobox .recipe-search { border: 2px solid #ad8cbe; background: #fffefa; padding: 12px 102px 12px 15px; font-size: 16px; }
.witchfeast .recipe-combobox .recipe-search:focus { border-color: #78518e; }
.witchfeast .recipe-combobox .recipe-search::placeholder { color: #75567f; }
.witchfeast .recipe-picker-panel { border-color: #bea2ce; box-shadow: 0 12px 30px #41215026; background: #fffefa; }
.witchfeast .recipe-picker-option.is-active,.witchfeast .recipe-picker-option:hover { background: #eee4f3; }
@media (min-width: 1500px) { .page-shell { padding-top: 45px; } }
@media (max-width: 1100px) {
  .brand { font-size: 28px; } .desktop-nav { gap: 1px; } .desktop-nav a { padding: 10px 12px; font-size: 12px; }
  .landing-hero { gap: 20px; } .hero-copy h1 { font-size: 64px; } .feature-grid article { padding: 24px; }
  .feature-grid h2 { font-size: 24px; } .grimoire-title>img { width: 90px; } .grimoire-title { gap: 15px; }
  .calendar-welcome { padding: 25px; } .welcome-art { width: 200px; } .day-heading { padding: 13px 9px; }
  .recipe-card h2 { font-size: 21px; } .recipe-card-body { padding: 18px; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 150px; }
  .site-header { height: 76px; } .header-inner { padding: 0 18px; gap: 12px; }
  .brand { font-size: 27px; gap: 7px; } .brand-mark { width: 36px; height: 38px; border-radius: 12px; }
  .brand-mark .icon { width: 27px; height: 27px; } .brand-spark { font-size: 12px; }
  .header-actions { gap: 12px; } .header-actions .btn { padding: 8px 10px; font-size: 11px; }
  .guest .brand { font-size: 24px; } .guest .brand-mark { width: 31px; height: 34px; }
  .guest .brand-spark { display: none; } .guest .header-actions { gap: 10px; font-size: 11px; }
  .page-shell { padding: 25px 18px 50px; } .site-footer { margin: 0 18px; gap: 12px; }
  .guest .site-footer { padding-bottom: 25px; } .version { font-size: 10px; }
  .mobile-nav { background: #fffbf6fa; border-color: #d9c8e1; box-shadow: 0 -4px 20px #42265106; }
  .mobile-nav a { min-width: 85px; border-radius: 12px; padding: 5px 10px; }
  .mobile-nav a[aria-current] { background: #eee3f2; color: #69417e; }
  .page-heading h1 { font-size: 34px; } .eyebrow { font-size: 9px; line-height: 1.7; }
  .btn { font-size: 12px; padding: 11px 14px; } .btn-lg { padding: 15px 21px; }
  .panel { padding: 22px; } .auth-card { padding: 28px 23px; } .auth-layout .auth-card { margin-top: 0; }
  .auth-card h1 { font-size: 32px; } .auth-card h2 { font-size: 30px; }
  .landing-hero { display: flex; flex-direction: column; gap: 28px; padding: 5px 0 40px; }
  .hero-copy { padding: 10px 3px 0; } .hero-copy h1 { font-size: clamp(53px,13.5vw,72px); }
  .hero-description { font-size: 16px; margin-bottom: 25px; } .hero-reassurance { font-size: 11px; }
  .witch-hero-art { width: 100%; padding-top: 0; } .art-caption { font-size: 8px; }
  .hero-note { padding: 12px 14px; gap: 10px; margin-top: 0; }
  .hero-note strong { font-size: 15px; } .hero-note small { font-size: 10px; }
  .ritual-divider { font-size: 8px; line-height: 1.8; letter-spacing: .1em; gap: 15px; }
  .ritual-divider>span:last-child { font-size: 19px; }
  .feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: 23px; }
  .feature-grid article { margin: 0; padding: 25px; } .feature-icon { margin-bottom: 18px; }
  .feature-grid h2 { font-size: 29px; } .feature-grid h2 br { display: none; }
  .welcome-strip { flex-wrap: wrap; margin-top: 30px; padding: 25px 8px; gap: 18px; }
  .welcome-strip>span { font-size: 43px; } .welcome-strip>div { flex: 1; }
  .welcome-strip>a { margin-left: 0; width: 100%; } .welcome-strip h2 { font-size: 26px; }
  .calendar-welcome { padding: 24px; border-radius: 18px; gap: 0; min-height: 178px; }
  .calendar-welcome>div { position: relative; z-index: 1; width: 100%; }
  .calendar-welcome h1 { font-size: 34px; max-width: 245px; }
  .calendar-welcome p:last-child { font-size: 12px; max-width: 210px; }
  .calendar-welcome .eyebrow { max-width: 230px; font-size: 8px; }
  .welcome-art { position: absolute; width: 135px; height: 135px; right: -20px; bottom: 10px; opacity: .4; }
  .calendar-actions { justify-content: stretch; gap: 10px; margin-bottom: 25px; }
  .calendar-actions .btn { flex: 1; padding: 11px 10px; font-size: 11px; }
  .week-summary { gap: 15px; padding: 0 0 18px; font-size: 10px; }
  .week-summary>a { margin-left: auto; } .date-navigation h2 { font-size: 17px; }
  .day-heading,.calendar-agenda .day-heading,.calendar-month .day-heading { background: #f4edf5; }
  .is-today .day-heading { background: #e7d9ef; }
  .calendar-grid,.calendar-month { background: transparent; }
  .calendar-day,.calendar-agenda .calendar-day { border-color: #ddcfe2 !important; background: #fffdf9; border-radius: 14px; }
  .meal-card h3 { font-size: 13px; } .meal-card { min-height: 83px; }
  .slot-label { font-size: 9px; } .calendar-month .meal-card { min-height: 0; }
  .grimoire-title { gap: 12px; align-items: center; } .grimoire-title>img { width: 54px; height: 54px; flex-shrink: 0; }
  .grimoire-heading { padding: 0; margin-bottom: 24px; border-bottom: 0; } .grimoire-title h1 { font-size: 32px; }
  .grimoire-title .eyebrow { display: none; }
  .grimoire-heading .grimoire-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; width: 100%; }
  .grimoire-actions .btn { width: 100%; min-height: 48px; padding: 12px 10px; font-size: 13px; }
  .grimoire-actions .import-dropdown { min-width: 0; }
  .grimoire-actions .import-dropdown-options { width: 100%; min-width: 150px; }
  .recipe-grid { gap: 14px; } .recipe-card { box-shadow: 2px 3px 0 #e8dfe8; }
  .recipe-image-link { height: 160px; } .recipe-placeholder img { width: 128px; height: 120px; }
  .recipe-placeholder span { font-size: 6px; } .recipe-card-body { padding: 14px; }
  .recipe-card h2 { font-size: 21px; line-height: 1.25; } .recipe-meta { font-size: 10px; }
  .recipe-card .recipe-meta { grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: 22px 22px; column-gap: 6px; row-gap: 0; }
  .recipe-time { grid-column: 1; grid-row: 1; }
  .recipe-servings { grid-column: 1; grid-row: 2; }
  .recipe-card .recipe-favorite-form { grid-column: 2; grid-row: 1 / 3; }
  .grimoire-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 20px; }
  .grimoire-grid .recipe-image-link { height: auto; aspect-ratio: 16 / 9; max-height: 280px; }
  .grimoire-grid .recipe-image-link > img { position: absolute; inset: 0; }
  .grimoire-grid .recipe-placeholder img { width: 145px; height: 132px; }
  .grimoire-grid .recipe-placeholder span { font-size: 8px; }
  .grimoire-grid .recipe-card-body { padding: 18px; }
  .grimoire-grid .recipe-card h2 { font-size: 24px; line-height: 1.3; margin-bottom: 16px; }
  .grimoire-grid .recipe-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; grid-template-rows: auto; gap: 8px; min-height: 55px; font-size: 12px; }
  .grimoire-grid .recipe-time { grid-column: 1; grid-row: 1; }
  .grimoire-grid .recipe-servings { grid-column: 2; grid-row: 1; }
  .grimoire-grid .recipe-favorite-form { grid-column: 3; grid-row: 1; }
  .detail-image,.detail-art { height: 250px; } .detail-art>img { width: 220px; height: 195px; }
  .detail-art span { font-size: 8px; } .recipe-stats { padding: 17px 0; }
  .step-list li { gap: 15px; } .step-list li>span { width: 30px; height: 30px; font-size: 15px; }
  .market-heading { gap: 12px; } .market-heading>img { width: 83px; height: 90px; }
  .market-heading h1 { font-size: 31px; } .market-heading .quiet { font-size: 12px; }
  .shopping-grid { grid-template-columns: 1fr; } .shopping-card h2 { font-size: 25px; }
  .shopping-card .list-icon { float: right; margin: 0 0 10px 15px; }
  .shopping-progress>div { flex-wrap: wrap; gap: 6px; } .shopping-item { padding: 14px 12px; }
}
@media (max-width: 370px) {
  .guest .header-inner { padding: 0 12px; } .guest .brand { font-size: 21px; }
  .guest .brand-mark { display: none; } .guest .header-actions { gap: 10px; }
  .recipe-grid { grid-template-columns: 1fr; } .recipe-image-link { height: 205px; }
  .calendar-actions { flex-wrap: wrap; } .calendar-actions .btn { flex-basis: 100%; }
  .date-navigation h2 { font-size: 15px; } .grimoire-title>img { width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .btn,.recipe-card { transition: none; } }
@media print {
  body.witchfeast { background: #fff; color: #000; }
  .print-sheet,.print-row { background: #fff; box-shadow: none; border-color: #bbb; }
  .print-category h2 { color: #35283e; border-color: #666; }
  .page-shell { padding: 0; } .print-sheet .eyebrow { color: #444; }
}
.meal-card { position: relative; }
.meal-details-link { display: block; color: inherit; }
.meal-details-link:hover { text-decoration: none; }
.meal-details-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.calendar-cook { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; margin: 12px 0 0; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--sage); color: var(--ink); font-size: 12px; font-weight: 600; }
.calendar-cook:hover { border-color: var(--green); color: var(--green); }
.calendar-cook svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Recipe photo imports */
.import-dropdown { position: relative; }
.import-dropdown > summary { cursor: pointer; list-style: none; }
.import-dropdown > summary::-webkit-details-marker { display: none; }
.import-chevron { font-size: 12px; }
.import-dropdown[open] .import-chevron { transform: rotate(180deg); }
.import-dropdown-options { position: absolute; top: calc(100% + 8px); left: 0; z-index: 15; width: 150px; max-width: calc(100vw - 36px); padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px #10091830; }
.import-dropdown-options a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; color: var(--ink); font-weight: 600; border-radius: 7px; }
.import-dropdown-options a:hover,.import-dropdown-options a:focus-visible { background: var(--sage); text-decoration: none; }
.import-option-icon { display: inline-flex; width: 14px; flex-shrink: 0; }
.import-option-icon .icon { width: 14px; height: 14px; }
.import-dropdown-options a.is-locked { color: #737373; font-weight: 500; }
[data-theme="dark"] .import-dropdown-options a.is-locked { color: #aaa; }
.ai-badge { border: 1px solid currentColor; font-size: .72rem; white-space: nowrap; }
.import-image-previews { display: flex; gap: .75rem; margin: 1rem 0; }
.import-image-previews img { width: calc((100% - 1.5rem) / 3); max-height: 180px; object-fit: contain; border-radius: .5rem; }
/* A shared modal waiting spell for link and photo imports. */
.import-spell[hidden] { display: none; }
.import-spell { position: fixed; inset: 0; width: min(360px, calc(100vw - 40px)); max-height: calc(100dvh - 40px); margin: auto; padding: 28px 24px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); color: var(--ink); text-align: center; box-shadow: 0 20px 80px #10091855; }
.import-spell::backdrop { background: #100918b3; backdrop-filter: blur(3px); }
html.import-in-progress { overflow: hidden; }
.import-spell strong { display: block; color: var(--green); font-family: Georgia, serif; font-size: 22px; }
.import-spell p { margin: 8px 0; font-size: 14px; }
.import-spell-art { position: relative; width: 116px; height: 96px; margin: 0 auto 10px; color: var(--green); }
.spell-cauldron { position: absolute; left: 27px; bottom: 0; transform-origin: center bottom; animation: spell-stir 2.4s ease-in-out infinite; }
.spell-cauldron .icon { width: 62px; height: 62px; }
.spell-spark { position: absolute; font-size: 21px; animation: spell-twinkle 2.4s ease-in-out infinite; }
.spell-spark-one { left: 5px; top: 21px; }
.spell-spark-two { right: 3px; top: 8px; animation-delay: -.8s; }
.spell-bubble { position: absolute; left: 54px; top: 38px; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%; animation: spell-bubble 2.1s ease-out infinite; }
.spell-bubble-two { left: 41px; width: 6px; height: 6px; animation-delay: -.7s; }
.spell-bubble-three { left: 67px; width: 7px; height: 7px; animation-delay: -1.4s; }
@keyframes spell-stir { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes spell-twinkle { 0%, 100% { opacity: .4; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@keyframes spell-bubble { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(-35px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) {
  .import-spell-art * { animation: none; }
  .spell-bubble-one { top: 8px; }
  .spell-bubble-two { top: 23px; }
  .spell-bubble-three { top: 19px; }
}