.cad-favorite-button { position: absolute; right: 11px; top: 11px; z-index: 3; min-height: 38px; padding: 9px 12px; border: 1px solid rgba(30, 73, 58, .32); border-radius: 999px; background: rgba(255, 253, 247, .97); color: var(--cad-forest-dark); box-shadow: 0 4px 14px rgba(37, 39, 31, .12); font: 650 13px/1.2 var(--cad-sans); white-space: nowrap; cursor: pointer; }
.cad-favorite-button:hover, .cad-favorite-button:focus, .cad-favorite-button.is-saved { background: var(--cad-forest); color: #fff; }
.cad-favorite-button:disabled { opacity: .65; cursor: wait; }

.cad-favorites-book { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin-bottom: 24px; padding: 19px 21px; border: 1px solid #b8c4b6; border-left: 4px solid var(--cad-forest); background: #eef3ea; }
.cad-favorites-book p { margin: 3px 0 0; color: var(--cad-muted); }
.cad-spellcheck-note { margin-top: 22px; padding: 13px 16px; border-left: 3px solid var(--cad-forest); background: #eef3ea; color: var(--cad-forest-dark); }
.cad-draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }

.cad-book-builder { max-width: 1200px; }
.cad-book-select-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 28px 0 16px; }
.cad-book-select-actions > strong { margin-left: auto; color: var(--cad-forest); }
.cad-book-recipe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-height: 600px; overflow: auto; padding: 4px; }
.cad-book-choice { display: block; position: relative; }
.cad-book-choice > input { position: absolute; top: 12px; left: 12px; z-index: 2; width: 20px; height: 20px; accent-color: var(--cad-forest); }
.cad-book-choice > span { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 82px; padding: 9px 12px 9px 44px; border: 1px solid var(--cad-line); background: #fff; }
.cad-book-choice > input:checked + span { border-color: var(--cad-forest); background: #eef3ea; }
.cad-book-choice img, .cad-book-placeholder { display: grid; place-items: center; width: 64px; height: 64px; object-fit: cover; background: #f0e7d5; color: var(--cad-forest); font: 700 24px var(--cad-serif); }
.cad-book-choice strong, .cad-book-choice small { display: block; }
.cad-book-choice small { color: var(--cad-muted); }

.cad-inline-scan { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 28px; margin: 0 0 30px; padding: 22px; border: 1px dashed var(--cad-gold); background: #fbf7ec; }
.cad-inline-scan h2, .cad-inline-scan p { margin-top: 0; }
.cad-inline-scan h2 { color: var(--cad-forest-dark); }
.cad-inline-scan label { position: relative; overflow: hidden; cursor: pointer; }
.cad-inline-scan input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cad-inline-scan .cad-progress, .cad-inline-scan [data-scan-status] { grid-column: 1 / -1; margin: 0; }

.cad-guest-contributor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 18px; border-left: 3px solid var(--cad-gold); background: #f8f2e6; }
.cad-guest-contributor > small { grid-column: 1 / -1; }
.cad-taxonomy-picker select, .cad-new-term input { width: 100%; padding: 11px 12px; border: 1px solid #cec3b0; border-radius: 3px; background: #fff; color: var(--cad-ink); font: inherit; }
.cad-new-term { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; margin-top: 9px; }
.cad-selected-terms { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.cad-term-chip { appearance: none; padding: 8px 11px; border: 1px solid #b9c7bc; border-radius: 999px; background: #f4eddf; color: var(--cad-forest-dark); font: 600 12px/1.2 var(--cad-sans); cursor: pointer; }
.cad-term-chip:hover, .cad-term-chip:focus { border-color: var(--cad-gold); color: var(--cad-forest-dark); }
.cad-quality-card section { margin: 20px 0; padding: 16px 18px; border: 1px solid var(--cad-line); background: #f8f3e9; }
.cad-quality-card li + li { margin-top: 8px; }
.cad-quality-warning { border-left: 4px solid var(--cad-gold) !important; }

.cad-archive-sync { margin-top: 28px; }
.cad-archive-status { padding: 18px; border: 1px solid var(--cad-line); background: #fbf7ec; }
.cad-archive-status-head { display: flex; justify-content: space-between; gap: 18px; }
.cad-archive-status > small { display: block; margin-top: 9px; color: var(--cad-muted); }
.cad-original-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--cad-line); }
.cad-original-links .cad-eyebrow { flex: 0 0 100%; text-align: center; }
.cad-contributions article > video { width: 100%; max-height: 620px; margin-top: 18px; background: #000; }

.cad-existing-media { margin: 0 0 18px; padding: 15px; border: 1px solid var(--cad-line); background: #faf6ed; }
.cad-existing-media > p { margin: 0 0 11px; }
.cad-media-help { max-width: 760px; color: var(--cad-muted); font-size: 14px; }
.cad-existing-media-grid { display: grid; gap: 10px; }
.cad-existing-media-item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--cad-line); background: #fff; }
.cad-existing-media-item.is-cover { border-color: #7e9a8a; box-shadow: inset 4px 0 var(--cad-forest); }
.cad-existing-media-item.is-busy { opacity: .65; pointer-events: none; }
.cad-media-preview { width: 112px; height: 82px; display: grid; place-items: center; overflow: hidden; background: #e8e4d8; color: var(--cad-muted); font-weight: 600; }
.cad-media-preview img, .cad-media-preview video { width: 100%; height: 100%; object-fit: cover; }
.cad-media-edit-actions { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 4px; }
.cad-media-edit-actions label { position: relative; overflow: hidden; cursor: pointer; }
.cad-media-edit-actions input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cad-existing-media-item small { color: var(--cad-muted); }
.cad-existing-media-item strong { display: block; overflow-wrap: anywhere; }
.cad-media-role { display: inline-block; margin: 0 0 5px; padding: 3px 7px; border-radius: 999px; background: #edf1e9; color: var(--cad-forest-dark); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cad-existing-media-item.is-cover .cad-media-role { background: var(--cad-forest); color: #fff; }
.cad-media-upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cad-media-upload-grid .cad-upload-box { display: block; min-height: 170px; cursor: pointer; }
.cad-media-upload-grid .cad-upload-box strong { display: block; margin-bottom: 8px; color: var(--cad-forest-dark); font-family: var(--cad-serif); font-size: 21px; }
.cad-media-upload-grid .cad-upload-box p { margin-bottom: 0; color: var(--cad-muted); }
.cad-cover-upload { border-style: solid; border-color: #789485; background: #f0f5ee; }

.cad-photo-button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.cad-photo-button img { display: block; }
.cad-photo-button > span { position: absolute; right: 8px; bottom: 8px; padding: 7px 10px; background: rgba(18, 55, 45, .94); color: #fff; font: 650 11px/1.2 var(--cad-sans); letter-spacing: .03em; text-transform: uppercase; opacity: 0; transform: translateY(4px); transition: opacity .16s, transform .16s; }
.cad-photo-button:hover > span, .cad-photo-button:focus > span { opacity: 1; transform: none; }
.cad-lightbox { position: fixed; inset: 0; z-index: 1200; display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 12px; padding: 58px clamp(12px, 3vw, 38px) 28px; background: rgba(10, 24, 19, .94); }
.cad-lightbox figure { margin: 0; min-width: 0; text-align: center; }
.cad-lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 120px); margin: auto; object-fit: contain; box-shadow: 0 18px 65px rgba(0, 0, 0, .38); }
.cad-lightbox figcaption { margin-top: 10px; color: #f5efdf; font: italic 14px var(--cad-serif); }
.cad-lightbox-close, .cad-lightbox-nav { appearance: none; border: 1px solid rgba(255, 255, 255, .5); background: rgba(18, 55, 45, .72); color: #fff; cursor: pointer; }
.cad-lightbox-close { position: absolute; right: 20px; top: 16px; width: 42px; height: 42px; font-size: 27px; line-height: 1; }
.cad-lightbox-nav { width: 52px; height: 64px; font: 36px/1 var(--cad-serif); }
.cad-lightbox-nav:hover, .cad-lightbox-nav:focus, .cad-lightbox-close:hover, .cad-lightbox-close:focus { background: var(--cad-gold); border-color: var(--cad-gold); }

.cad-gallery-tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 0 0 24px; padding: 16px; border-top: 1px solid var(--cad-gold); border-bottom: 1px solid var(--cad-gold); }
.cad-gallery-tools label { width: min(100%, 620px); }
.cad-gallery-tools label > span { display: block; margin-bottom: 6px; color: var(--cad-muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cad-gallery-tools input { width: 100%; padding: 13px 14px; border: 1px solid #cec3b0; border-radius: 3px; background: #fff; color: var(--cad-ink); font: inherit; }
.cad-gallery-tools > span { min-width: max-content; color: var(--cad-muted); font-weight: 600; }
.cad-photo-gallery { columns: 4 245px; column-gap: 18px; }
.cad-gallery-card { display: inline-block; width: 100%; margin: 0 0 18px; overflow: hidden; break-inside: avoid; border: 1px solid var(--cad-line); background: var(--cad-paper); box-shadow: 0 7px 22px rgba(37, 39, 31, .07); }
.cad-gallery-card .cad-photo-button img { display: block; width: 100%; height: auto; max-height: 470px; object-fit: cover; }
.cad-gallery-card > div { padding: 15px 16px 17px; }
.cad-gallery-card h3 { margin: 0 0 7px; font-size: 21px; }
.cad-gallery-card h3 a { color: var(--cad-forest-dark); text-decoration: none; }
.cad-gallery-card h3 a:hover, .cad-gallery-card h3 a:focus { color: var(--cad-gold-text); text-decoration: underline; }
.cad-gallery-card p { margin: 0 0 6px; color: var(--cad-muted); }
.cad-gallery-card small { color: var(--cad-muted); font-style: italic; }

.cad-tutorial { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 20px; background: rgba(12, 37, 29, .78); }
.cad-tutorial-card { position: relative; width: min(100%, 650px); padding: clamp(27px, 5vw, 48px); border-top: 4px solid var(--cad-gold); background: var(--cad-paper); box-shadow: 0 28px 90px rgba(0, 0, 0, .34); }
.cad-tutorial-icon { width: 82px; height: 82px; margin: -7px 0 15px; background: url("../images/come-and-dine-app-icon.webp") center / contain no-repeat; filter: drop-shadow(0 6px 7px rgba(30, 73, 58, .13)); }
.cad-tutorial-close { position: absolute; right: 14px; top: 12px; width: 38px; height: 38px; border: 0; background: transparent; color: var(--cad-muted); font-size: 28px; cursor: pointer; }
.cad-tutorial-number { margin: 0 0 5px; color: var(--cad-muted); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cad-tutorial-card h2 { margin: 0 0 14px; color: var(--cad-forest-dark); font-size: clamp(30px, 5vw, 43px); }
.cad-tutorial-card [data-tutorial-copy] > p:last-child { color: #555a4d; font-size: 17px; }
.cad-tutorial-progress { display: flex; gap: 7px; margin: 27px 0 17px; }
.cad-tutorial-progress span { flex: 1; height: 4px; background: var(--cad-line); }
.cad-tutorial-progress span.is-current { background: var(--cad-gold); }
.cad-tutorial-progress span.is-complete { background: var(--cad-sage); }
.cad-tutorial-actions { display: flex; justify-content: space-between; gap: 10px; }
.cad-tutorial-actions button { min-width: 110px; }
.cad-tutorial-actions button:disabled { opacity: .4; cursor: default; }
.cad-tutorial-skip { display: block; margin: 17px auto 0; padding: 4px; border: 0; background: transparent; color: var(--cad-muted); text-decoration: underline; cursor: pointer; }

.cad-guided-tour { position: fixed; z-index: 1403; left: 50%; bottom: 20px; width: min(calc(100% - 24px), 620px); max-height: calc(100vh - 40px); overflow-y: auto; transform: translateX(-50%); border: 1px solid #b7a88e; border-top: 4px solid var(--cad-gold); background: var(--cad-paper); box-shadow: 0 22px 75px rgba(10, 28, 21, .32); }
.cad-guided-tour-card { position: relative; padding: 22px 24px 18px; }
.cad-guided-tour-card h2 { margin: 0 36px 9px 0; color: var(--cad-forest-dark); font-size: clamp(25px, 4vw, 34px); }
.cad-guided-tour-card [data-tour-copy] > p:last-child { margin: 0; color: #3f493f; font-size: 16px; line-height: 1.55; }
.cad-guided-tour .cad-tutorial-progress { margin: 18px 0 14px; }
.cad-tour-highlight { pointer-events: none; outline: 4px solid var(--cad-gold) !important; outline-offset: 6px; box-shadow: 0 0 0 10px rgba(189, 139, 67, .2), 0 16px 42px rgba(18, 55, 45, .18) !important; scroll-margin-block: 150px 310px; }
.cad-tour-highlight.cad-button, .cad-tour-highlight.cad-header-help { outline-offset: 4px; }
@keyframes cad-tour-pulse { 0%, 100% { outline-color: var(--cad-gold); } 50% { outline-color: #e2b468; } }
.cad-tour-highlight { animation: cad-tour-pulse 1.5s ease-in-out infinite; }

.cad-login-page { min-height: 100vh; }
.cad-login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(370px, .92fr); background: var(--cad-cream); }
.cad-login-story { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: clamp(42px, 8vw, 105px); background: linear-gradient(150deg, #163c31, #214f3f); color: #fff; }
.cad-login-story::before { content: ""; position: absolute; width: min(48vw, 650px); aspect-ratio: 1; right: -17%; bottom: -20%; background: url("../images/come-and-dine-app-icon.webp") center / contain no-repeat; opacity: .13; filter: saturate(.7); }
.cad-login-story::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(189, 139, 67, .45); pointer-events: none; }
.cad-login-brand { align-self: flex-start; margin-bottom: clamp(55px, 9vh, 105px); color: #fff !important; position: relative; z-index: 1; }
.cad-login-brand .cad-brand-mark { width: 82px; height: 82px; }
.cad-login-brand strong { color: #fff; font-size: 28px; }
.cad-login-brand small { color: #dce3d8; }
.cad-login-story h1 { position: relative; z-index: 1; max-width: 760px; margin: 0 0 20px; color: #fff; font-size: clamp(47px, 7vw, 84px); letter-spacing: -.035em; }
.cad-login-story > p { position: relative; z-index: 1; max-width: 680px; color: #e1e8df; font-size: clamp(17px, 2vw, 21px); }
.cad-login-story .cad-ornament { color: #d9ae69; }
.cad-login-card { align-self: center; margin: 32px clamp(22px, 5vw, 80px); padding: clamp(28px, 5vw, 52px); border-top: 3px solid var(--cad-gold); background: var(--cad-paper); box-shadow: 0 24px 75px rgba(30, 48, 37, .16); }
.cad-login-card h2 { margin: 0 0 24px; color: var(--cad-forest-dark); font-size: clamp(34px, 4vw, 50px); }
.cad-login-form { display: grid; gap: 17px; }
.cad-login-form label > span { display: block; margin-bottom: 7px; color: var(--cad-forest-dark); font-weight: 600; }
.cad-login-form input[type="text"], .cad-login-form input[type="password"] { width: 100%; padding: 14px; border: 1px solid #cec3b0; border-radius: 3px; background: #fff; font: inherit; }
.cad-login-form a { color: var(--cad-forest); font-weight: 600; }
.cad-remember { display: flex; align-items: center; gap: 9px; color: var(--cad-muted); }
.cad-remember input { width: 18px; height: 18px; accent-color: var(--cad-forest); }
.cad-login-submit { width: 100%; padding: 15px; }
.cad-login-help { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--cad-line); color: var(--cad-muted); font-size: 14px; }

@media (max-width: 1050px) {
  .cad-login-shell { grid-template-columns: 1fr; }
  .cad-login-story { min-height: 44vh; padding: 48px 32px 38px; }
  .cad-login-brand { margin-bottom: 36px; }
  .cad-login-story h1 { font-size: clamp(42px, 10vw, 66px); }
  .cad-login-card { margin: 0 20px 36px; }
}
@media (max-width: 720px) {
  .cad-inline-scan, .cad-guest-contributor, .cad-new-term { grid-template-columns: 1fr; }
  .cad-inline-scan .cad-progress, .cad-inline-scan [data-scan-status], .cad-guest-contributor > small { grid-column: 1; }
  .cad-account-nav { gap: 9px 14px; flex-wrap: nowrap; justify-content: flex-start; }
  .cad-account-nav a { font-size: 13px; }
  .cad-favorites-book { align-items: flex-start; flex-direction: column; }
  .cad-book-select-actions > strong { flex: 0 0 100%; margin-left: 0; }
  .cad-existing-media-item { grid-template-columns: 82px minmax(0, 1fr); }
  .cad-media-upload-grid { grid-template-columns: 1fr; }
  .cad-media-preview { width: 82px; height: 72px; }
  .cad-lightbox { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 5px; padding-inline: 5px; }
  .cad-lightbox-nav { width: 38px; height: 55px; }
  .cad-gallery-tools { align-items: stretch; flex-direction: column; }
  .cad-photo-gallery { columns: 2 170px; }
  .cad-tutorial { padding: 10px; }
  .cad-tutorial-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cad-tutorial-actions button { min-width: 0; white-space: normal; }
  .cad-guided-tour { bottom: 8px; width: calc(100% - 16px); max-height: min(52vh, 430px); }
  .cad-guided-tour-card { padding: 18px 16px 14px; }
  .cad-guided-tour-card h2 { font-size: 25px; }
  .cad-guided-tour-card [data-tour-copy] > p:last-child { font-size: 14px; }
  .cad-tour-highlight { scroll-margin-block: 90px 55vh; }
}
@media (max-width: 470px) {
  .cad-photo-gallery { columns: 1; }
  .cad-existing-media-item { grid-template-columns: 1fr; }
  .cad-media-preview { width: 100%; height: 170px; }
  .cad-media-edit-actions { display: grid; grid-template-columns: 1fr; }
  .cad-media-edit-actions .cad-button, .cad-media-edit-actions label { width: 100%; }
}