/* ========================================
   Backyard Blue - shared pieces.
   Pages with no board of their own (Profile, Kitchen rules, new
   Kitchen) and the shared empty state use the same parts as the
   boards: warm white cards on a heeler-dark line, rounded-rectangle
   controls, no shadows at rest.
   ======================================== */
:root {
  --tap: 44px;
  --card-shadow: none;
  --ui-text-soft: var(--color-ink-soft);
}

/* Settings pages link and focus in heeler blue, like the boards. */
.app-shell .profile-shell {
  --ui-positive: var(--color-heeler);
  --ui-positive-hover: var(--color-heeler-dark);
  --ui-focus-outline: var(--color-heeler);
  --profile-control-border: var(--line-color);
}

/* ── Tap areas ─────────────────────────── */
/* Controls the boards draw smaller than 44px keep a 44px tap area. */
:is(.app-navbar-link, .import-tab, .import-submit-btn, .rx-chip, a.channel-attribution, .groceries-tab, .recipe-detail-plan-close, .recipe-detail-plan-remove, .recipe-detail-plan-toast-retry, .recipe-detail-plan-toast-dismiss, .recipe-index-search-clear, .prep-ingredient-disclosure summary, .rv-switch__option) {
  position: relative;
}

:is(.app-navbar-link, .import-tab, .import-submit-btn, .rx-chip, a.channel-attribution, .groceries-tab, .recipe-detail-plan-close, .recipe-detail-plan-remove, .recipe-detail-plan-toast-retry, .recipe-detail-plan-toast-dismiss, .recipe-index-search-clear, .prep-ingredient-disclosure summary, .rv-switch__option)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

/* ── Page head ─────────────────────────── */
.app-shell :is(.profile-header h1, .kitchen-rules-header h1, .kitchen-create h1) {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-display);
  letter-spacing: 0;
  color: var(--color-ink);
}

/* ── Buttons ───────────────────────────── */
.app-shell :is(.empty-state__action, .profile-button, .kitchen-create-submit, .profile-text-action, .profile-planning-option, .back-link) {
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.app-shell :is(.empty-state__action, .profile-button, .kitchen-create-submit, .profile-text-action, .profile-planning-option, .back-link):active { transform: scale(0.97); }

.app-shell :is(.empty-state__action, .profile-button:not(.profile-button--secondary), .kitchen-create-submit) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 44px;
  padding: var(--button-primary-padding);
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-heeler);
  box-shadow: none;
  color: var(--color-paper);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-title);
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
}

.app-shell :is(.profile-text-action, .profile-button--secondary, .profile-shell .btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: fit-content;
  min-height: 44px;
  padding: var(--button-secondary-padding);
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  box-shadow: none;
  color: var(--color-ink);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  line-height: var(--leading-title);
  font-family: var(--font-display);
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .app-shell :is(.empty-state__action, .profile-button:not(.profile-button--secondary), .kitchen-create-submit):hover { background: var(--color-heeler-dark); transform: none; }
  .app-shell :is(.profile-text-action, .profile-button--secondary, .profile-shell .btn-secondary):hover { background: var(--color-hover); }
}

/* ── Touch: line weights, lift and sink (v2.1) ── */
/* One main action per screen draws the 2px line. */
html body :is(.empty-state__action, .profile-button:not(.profile-button--secondary), .kitchen-create-submit, .auth-button, .plan-week-primary, .plan-week-picker-preferences-form input[type="submit"], .import-submit-btn, .kitchen-members-button:not(.kitchen-members-button--quiet)) {
  border-width: 2px;
}

/* Lined buttons are flat, with no shadow. With motion allowed, they lift
   under a pointer and sink when pressed. The button inside the import field
   stays put. */
html body :is(.empty-state__action, .profile-button, .kitchen-create-submit, .auth-button, .plan-week-primary, .plan-week-picker-preferences-form input[type="submit"], .import-submit-btn:not(.import-input-field .import-submit-btn), .kitchen-members-button, .profile-text-action, .save-button:not(.archive-button), .detail-nav .recipe-favorite-button):not(:disabled, .is-disabled) {
  transition: transform 120ms ease-out, background-color 150ms ease, color 150ms ease;
}

/* One check box: a 26px rounded square on the heeler-dark line. Ticked, it
   fills backyard dark and takes the leaf line. */
:is(.ingredient-box, .prep-check) {
  width: 26px;
  height: 26px;
  box-sizing: border-box;
  border: var(--line);
  border-radius: var(--radius-sm);
}

:is(.ingredient-toggle[aria-pressed="true"] .ingredient-box, .prep-step[aria-pressed="true"] .prep-check) {
  border-color: var(--line-color);
  background: var(--color-ink);
}

/* A tick pops: the check mark grows past full size and settles. It is a
   transition, so checks that load ticked stay still. */
:is(.ingredient-box, .prep-check) svg { transform: scale(0.6); }
:is(.ingredient-toggle[aria-pressed="true"] .ingredient-box, .prep-step[aria-pressed="true"] .prep-check) svg { transform: none; }

@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    html body :is(.empty-state__action, .profile-button, .kitchen-create-submit, .auth-button, .plan-week-primary, .plan-week-picker-preferences-form input[type="submit"], .import-submit-btn:not(.import-input-field .import-submit-btn), .kitchen-members-button, .profile-text-action, .save-button:not(.archive-button), .detail-nav .recipe-favorite-button):not(:disabled, .is-disabled):hover { transform: translate(-2px, -2px); }
  }

  html body :is(.empty-state__action, .profile-button, .kitchen-create-submit, .auth-button, .plan-week-primary, .plan-week-picker-preferences-form input[type="submit"], .import-submit-btn:not(.import-input-field .import-submit-btn), .kitchen-members-button, .profile-text-action, .save-button:not(.archive-button), .detail-nav .recipe-favorite-button):not(:disabled, .is-disabled):active { transform: translate(1px, 1px) scale(0.97); }

  :is(.ingredient-box, .prep-check) svg { transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); }
}

/* Unselected chips have no line: a tint fill. The border stays, transparent, so sizes hold. */
.rx-chip[aria-pressed="false"],
.app-shell .profile-planning-option:not(:has(input:checked)) {
  border-color: transparent;
  background: var(--color-hover);
}

/* ── Empty states: three covers, each on its own line ── */
.app-shell .empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  max-width: 440px;
  margin: clamp(var(--space-lg), 5vh, var(--space-2xl)) auto;
  padding: 0 var(--space-lg);
  border: 0;
  background: none;
  text-align: center;
  animation: none;
}

.app-shell .empty-state__art {
  position: relative;
  width: 196px;
  height: 148px;
}

.app-shell .empty-state__art span {
  position: absolute;
  left: 50%;
  bottom: 0;
  box-sizing: border-box;
  width: 98px;
  height: 128px;
  margin-left: calc(var(--space-sm) * 6 * -1);
  border: var(--line);
  border-radius: var(--radius-cover);
  background: var(--color-paper);
  transform-origin: 50% 100%;
  transition: transform 300ms var(--ease-out);
}

.app-shell .empty-state__art span:nth-child(1) { transform: translateX(-46px) rotate(-11deg); background: var(--color-hover); }
.app-shell .empty-state__art span:nth-child(3) { transform: translateX(46px) rotate(11deg); border-color: var(--line-color); background: var(--color-cream-dark); }

/* The front cover: a plate and a title line. */
.app-shell .empty-state__art span:nth-child(2) { z-index: 1; }

.app-shell .empty-state__art span:nth-child(2)::before {
  content: "";
  position: absolute;
  inset: 9px 9px 41px;
  border-radius: var(--radius-sm);
  background: var(--color-cream-dark);
}

/* A sunshine plate on the cover: two lined circles, no shadow. */
.app-shell .empty-state__plate {
  position: absolute;
  z-index: 1;
  top: 21.5px;
  left: 22.5px;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: var(--line);
  border-color: var(--line-color);
  border-radius: 50%;
  background: var(--color-cream-dark);
}

.app-shell .empty-state__plate::before {
  content: "";
  position: absolute;
  top: 8.5px;
  left: 8.5px;
  box-sizing: border-box;
  width: 30px;
  height: 30px;
  border: var(--line);
  border-radius: 50%;
  background: var(--color-paper);
}

.app-shell .empty-state__art span:nth-child(2)::after,
.app-shell .empty-state__line {
  content: "";
  position: absolute;
  left: 11px;
  right: 29px;
  bottom: 21px;
  height: 7px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
}

.app-shell .empty-state__line {
  left: 12px;
  right: 30px;
  bottom: 35px;
  height: 5px;
  background: var(--color-cream-dark);
}

@media (hover: hover) and (pointer: fine) {
  .app-shell .empty-state:hover .empty-state__art span:nth-child(1) { transform: translateX(-54px) rotate(-14deg); }
  .app-shell .empty-state:hover .empty-state__art span:nth-child(3) { transform: translateX(54px) rotate(14deg); }
}

.app-shell .empty-state__copy { display: grid; justify-items: center; gap: var(--space-sm); }

.app-shell .empty-state__title {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-size: var(--text-headline);
  line-height: var(--leading-headline);
  font-family: var(--font-display);
  color: var(--color-ink);
}

.app-shell .empty-state__body {
  margin: 0;
  max-width: 34ch;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
  text-wrap: pretty;
}

.app-shell .empty-state__actions { margin-top: var(--space-sm); }

/* ── Settings: white cards, options are chips ── */
.app-shell .profile-card {
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  box-shadow: none;
}

.app-shell .profile-pane--language .profile-card { padding: 0; border: 0; background: none; }

/* The account cover card draws the same line. */
@media (min-width: 1024px) {
  .app-shell .profile-account { border: var(--line); }
}

@media (max-width: 1023px) {
  .app-shell .profile-summary { border: var(--line); }
}

.app-shell .profile-planning-option {
  min-height: 44px;
  padding: 0 var(--space-md) 0 var(--space-sm-md);
  border: var(--line);
  border-radius: var(--radius-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: var(--weight-bold);
}

.app-shell .profile-planning-option input {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
  border: var(--line);
  border-radius: 50%;
  background: var(--color-paper);
  box-shadow: none;
}

.app-shell .profile-planning-option input[type="checkbox"] { width: 26px; height: 26px; flex-basis: 26px; border-radius: var(--radius-sm); }

.app-shell .profile-planning-option:has(input:checked) { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.app-shell .profile-planning-option input:checked { border-color: var(--color-cream-dark); background: var(--color-cream-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e2a4f' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; }

.app-shell .profile-planning-option input[type="checkbox"] { appearance: none; }
.app-shell .profile-planning-option:has(input[type="checkbox"]:focus-visible) { outline: 2px solid var(--color-heeler); outline-offset: 2px; }
.app-shell .profile-planning-option:has(input[type="checkbox"]:disabled) { background: var(--color-cream-dark); color: var(--color-ink-soft); cursor: not-allowed; }

@media (hover: hover) and (pointer: fine) {
  .app-shell .profile-planning-option:not(:has(input:checked, input[type="checkbox"]:disabled)):hover { background: var(--color-hover); }
}

.app-shell :is(.profile-shell .auth-input, .profile-shell .profile-select, .kitchen-create input[type="text"]) {
  min-height: 48px;
  border: var(--line);
  border-radius: var(--radius-md);
  background-color: var(--color-paper);
  box-shadow: none;
}

/* The card keeps the page gutter on the phone. */
.app-shell .kitchen-create {
  width: calc(100% - var(--space-md) * 2);
  max-width: 520px;
  margin-top: clamp(var(--space-md), 4vh, var(--space-xl));
  padding: clamp(var(--space-lg), 4vw, var(--space-xl));
  border: var(--line);
  border-radius: var(--radius-xl);
  background: var(--color-paper);
  box-shadow: none;
}

.app-shell .kitchen-create p { color: var(--color-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .app-shell :is(.empty-state__action, .profile-button, .kitchen-create-submit, .profile-text-action, .profile-planning-option, .back-link):active { transform: none; }
  .app-shell .empty-state__art span { transition: none; }
  .app-shell .empty-state:hover .empty-state__art span:nth-child(1) { transform: translateX(-46px) rotate(-11deg); }
  .app-shell .empty-state:hover .empty-state__art span:nth-child(3) { transform: translateX(46px) rotate(11deg); }
}