/* apple-1031.css  DRAFT visual layer for the Moon Within app (v3), linked LAST, after apple-1030.css.
   CSS only. No wording, image, price, link, form field, order or script changes, and no new
   hosts or fonts. Shira's palette (teal #235c68 / #204d59, yellow #f3d86a, her greens and the
   tile colours) is not touched; this file changes shape, space, type scale, depth and edges.
   Pass 1031: type scale, grouped card surfaces, 44 px controls, focus rings, sheet viewer,
   safe areas, full-bleed on phones. RTL: logical properties throughout. */

#moon-within-preview, #mw-viewer {
  /* 8-pt spacing rhythm */
  --a-1: 8px; --a-2: 16px; --a-3: 24px; --a-4: 32px;
  /* corner radii: small control, card, large card / sheet */
  --a-r-s: 12px; --a-r-m: 16px; --a-r-l: 20px;
  /* soft layered depth: a hairline edge, a contact shadow, an ambient shadow (teal, never grey) */
  --a-shadow-1: 0 0 0 0.5px rgb(32 77 89 / 0.10), 0 1px 2px rgb(32 77 89 / 0.07), 0 4px 14px rgb(32 77 89 / 0.07);
  --a-shadow-2: 0 0 0 0.5px rgb(32 77 89 / 0.12), 0 2px 4px rgb(32 77 89 / 0.08), 0 10px 28px rgb(32 77 89 / 0.12);
  /* type scale (Hebrew leading is looser than Latin; tracking stays 0) */
  --a-large-title: 28px;  --a-large-title-lh: 1.25;
  --a-title: 19px;        --a-title-lh: 1.4;
  --a-headline: 17px;     --a-headline-lh: 1.45;
  --a-body: 16px;         --a-body-lh: 1.65;
  --a-footnote: 14px;     --a-footnote-lh: 1.55;
  --a-ring: #246b3e;
  /* system stack leads (SF on iPhone, which has Hebrew); Arial was only a generic fallback */
  --a-font: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Arial, sans-serif;
}

/* 1. Type. The app font was Arial (a generic fallback, no brand face), so the system font
      takes over; the controls that hard-coded Arial inherit it. */
#moon-within-preview, #mw-viewer { font-family: var(--a-font); }
#moon-within-preview .mw-brand, #moon-within-preview .mw-search, #moon-within-preview textarea,
#moon-within-preview button, #moon-within-preview input, #moon-within-preview select { font-family: inherit; }
#moon-within-preview .mw-brand { font-size: 28px; line-height: 1.2; }
/* large title: one per screen (specificity kept below .mw-home-tagline and .mw-hero h2, which size themselves) */
#moon-within-preview section > h2 {
  font-size: var(--a-large-title); line-height: var(--a-large-title-lh); margin-block: 0 var(--a-1);
}
#moon-within-preview h3 { font-size: var(--a-title); line-height: var(--a-title-lh); }
#moon-within-preview .mw-action, #moon-within-preview .mw-topic { line-height: var(--a-headline-lh); }
#moon-within-preview p { line-height: var(--a-body-lh); }
/* footnote: never under 13 px */
#moon-within-preview :is(.mw-muted, .mw-copyright, .mw-copyright p, .mw-scan-limit, .mw-scan-status) {
  font-size: max(13px, var(--a-footnote)); line-height: var(--a-footnote-lh);
}
#moon-within-preview .mw-draft { font-size: 13px; padding-block: 10px; line-height: 1.5; }
#moon-within-preview :is(.mw-daily-state, .mw-daily-source) { font-size: 13px; }
#moon-within-preview .mw-daily-controls label { font-size: 13px; }

/* 2. Layout rhythm and safe areas. */
#moon-within-preview .mw-main {
  padding-block: var(--a-3) var(--a-4);
  padding-inline: max(var(--a-3), env(safe-area-inset-left, 0px)) max(var(--a-3), env(safe-area-inset-right, 0px));
}
#moon-within-preview .mw-head {
  padding-inline: max(var(--a-3), env(safe-area-inset-left, 0px)) max(var(--a-3), env(safe-area-inset-right, 0px));
}
#moon-within-preview .mw-copyright {
  padding-block: var(--a-2) max(var(--a-3), env(safe-area-inset-bottom, 0px));
  padding-inline: max(var(--a-3), env(safe-area-inset-left, 0px)) max(var(--a-3), env(safe-area-inset-right, 0px));
}
/* On a phone the app is the screen, not a card in a page: full-bleed. */
@media (max-width: 560px) {
  #moon-within-preview { padding: 0; min-height: 100vh; min-height: 100dvh; }
  #moon-within-preview .mw-phone { border-radius: 0; border-width: 0; box-shadow: none; min-height: inherit; }
  /* less chrome before the first title: the logo and wording are unchanged, only the padding around them */
  #moon-within-preview .mw-head { padding-block: var(--a-2) 14px; }
  #moon-within-preview .mw-draft { padding-block: var(--a-1); }
}
@media (min-width: 561px) {
  #moon-within-preview .mw-phone { border-radius: 28px; box-shadow: var(--a-shadow-2); }
}

/* 3. Header and tab bar. The yellow rule under the logo stays; the heavy green rule slims down. */
#moon-within-preview .mw-nav {
  border-bottom-width: 2px;
  padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px));
  padding-bottom: var(--a-1);
  gap: 4px;
}
/* the translucent bar let scrolled headings show through behind the tab labels (still visible at 98.5 percent in WebKit);
   a solid bar keeps the labels clean. White on #235c68 is 7.49:1. */
#moon-within-preview .mw-nav {
  background: #235c68;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#moon-within-preview .mw-nav button {
  border-radius: var(--a-r-m);
  min-height: 60px;
  line-height: 1.3;
}
/* the selected tab is a raised pill (colours unchanged: #204d59 on #f3d86a) */
#moon-within-preview .mw-nav button[aria-pressed="true"] {
  box-shadow: 0 1px 2px rgb(10 40 48 / 0.25), 0 3px 8px rgb(10 40 48 / 0.18);
}

/* 4. Surfaces. One continuous-feel family of cards: 16 px corners, a hairline edge, soft depth.
      The thick coloured start-edge on action rows tapered against the rounded corner; the
      row keeps its tile colour and 1 px border, and the accent edge goes. */
#moon-within-preview .mw-action {
  border-radius: var(--a-r-m);
  border-inline-start-width: 1px;
  padding: var(--a-2);
  margin-top: 12px;
  min-height: 56px;
  box-shadow: var(--a-shadow-1);
}
/* the start edge was a darker accent colour; with a 1 px edge it must match the other three sides */
#moon-within-preview .mw-action:where(:not(.mw-primary)) { border-inline-start-color: #8bbfc6; }
#moon-within-preview .mw-action.mw-keto { border-inline-start-color: #96b984; }
#moon-within-preview [data-screen="home"] .mw-action.mw-home-row { border-radius: var(--a-r-m); box-shadow: var(--a-shadow-1); border-inline-start-width: 1px; }
#moon-within-preview [data-screen="home"] .mw-action.mw-primary.mw-home-row { box-shadow: 0 1px 2px rgb(32 77 89 / 0.30), 0 6px 16px rgb(32 77 89 / 0.22); }
#moon-within-preview .mw-primary { box-shadow: 0 1px 2px rgb(36 107 62 / 0.30), 0 6px 16px rgb(36 107 62 / 0.22); }
#moon-within-preview .mw-topic, #moon-within-preview .mw-season { border-radius: var(--a-r-m); box-shadow: var(--a-shadow-1); }
#moon-within-preview .mw-topics { gap: 12px; }
#moon-within-preview .mw-seasons { gap: 12px; }
#moon-within-preview :is(.mw-hero, .mw-note, .mw-welcome-post, .mw-bday-card, .mw-community-draft, .mw-scanner-hero) {
  border-radius: var(--a-r-l);
}
#moon-within-preview :is(.mw-note, .mw-bday-card, .mw-community-options, .mw-shopping, .mw-calendar-reminder, .mw-carb-panel,
    .mw-scan-finding, .mw-policy-note, .mw-policy-contents, .mw-community-draft, .mw-recipe-card) {
  border-radius: var(--a-r-m);
  box-shadow: var(--a-shadow-1);
}
#moon-within-preview :is(.mw-welcome-post, .mw-hero) { box-shadow: var(--a-shadow-2); }
#moon-within-preview .mw-note { padding: var(--a-2); margin-block: var(--a-2); }
#moon-within-preview .mw-recipe-card { border-radius: var(--a-r-l); }
#moon-within-preview :is(.mw-video, .mw-video-poster, .mw-recipe-photo, .mw-scan-preview, .mw-doc-page) { border-radius: var(--a-r-m); }
#moon-within-preview .mw-home-cover { border-radius: var(--a-r-s); }
/* hairline separators in lists */
#moon-within-preview :is(.mw-policy-section, .mw-program-row, .mw-shopping-item) { border-bottom-width: 0.5px; }
#moon-within-preview .mw-detail { border-top-width: 0.5px; }

/* Callout accents (critique pass): a thick coloured border-edge on a rounded card tapers into a crescent at the corners.
   The same colours are now drawn as an inset bar, which the corner radius clips cleanly. Colours are unchanged;
   the app is RTL throughout, so the start edge is the right edge (negative x offset). */
#moon-within-preview .mw-welcome-post {
  border-top-width: 1px; border-top-color: #be648b;
  box-shadow: inset 0 4px 0 #913458, var(--a-shadow-2);
}
#moon-within-preview .mw-community-notice {
  border-inline-start-width: 1px; border-inline-start-color: #c57298;
  box-shadow: inset -4px 0 0 #913458, var(--a-shadow-1);
  border-radius: var(--a-r-m);
}
#moon-within-preview .mw-note.mw-caution {
  border-inline-start-width: 1px; border-inline-start-color: #c9a24a;
  box-shadow: inset -5px 0 0 #b07d12, var(--a-shadow-1);
}

/* 5. Controls: 44 px minimum, pill chips, clear fields. */
#moon-within-preview :is(.mw-action, .mw-topic, .mw-concern, .mw-season, .mw-reset, .mw-nav button,
    .mw-community-tabs button, .mw-policy-back, .mw-bday-row button) { min-height: 44px; }
#moon-within-preview .mw-concern { border-radius: 999px; padding-inline: 16px; box-shadow: var(--a-shadow-1); }
#moon-within-preview .mw-concerns { gap: 8px; }
#moon-within-preview .mw-community-tabs { gap: 8px; }
#moon-within-preview .mw-community-tabs button { border-radius: 999px; box-shadow: var(--a-shadow-1); }
#moon-within-preview .mw-community-tabs button[aria-selected="true"] { box-shadow: var(--a-shadow-2); }
#moon-within-preview .mw-bday-row button { border-radius: 999px; }
#moon-within-preview .mw-search, #moon-within-preview textarea, #moon-within-preview .mw-carb-panel input,
#moon-within-preview .mw-community-form select, #moon-within-preview .mw-calendar-reminder :is(input, select) {
  border-radius: var(--a-r-m);
  min-height: 48px;
}
#moon-within-preview textarea { min-height: 112px; }
#moon-within-preview :is(summary, .mw-calendar-reminder summary, .mw-copyright summary, .mw-shopping summary,
    .mw-community-options summary, .mw-policy-contents summary) { min-height: 44px; padding-block: 10px; }
/* selects: Safari ignores min-height on a native select, so draw the box ourselves; the picker still opens natively.
   The chevron is an inline data: SVG (img-src already allows data:). Root is RTL, so it sits on the left (the end side). */
#moon-within-preview select:not([multiple]) {
  -webkit-appearance: none; appearance: none;
  min-height: 48px; padding-block: 10px; padding-inline: 12px 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%23204d59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 14px center; background-size: 14px 9px;
}
#moon-within-preview .mw-daily-check { min-height: 44px; }
#moon-within-preview .mw-daily-controls input { min-height: 44px; }
#moon-within-preview .mw-daily-card { border-radius: var(--a-r-m); box-shadow: var(--a-shadow-1); padding: 12px var(--a-2); }
#moon-within-preview .mw-daily-card:not(:last-child) { margin-bottom: 12px; }
#moon-within-preview .mw-program-day { border-radius: var(--a-r-s); }

/* The community "מתחילות כאן" link stays plainly a link (underlined, bold, #8F4F5A). It gets a calmer
   underline, a 44 px tap area and press feedback. */
#moon-within-preview a[href="#start"] {
  position: relative;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}
#moon-within-preview a[href="#start"]::before { content: ""; position: absolute; inset: -12px -6px; }
#moon-within-preview a[href="#start"]:active { opacity: 0.6; }

/* focus: a clear ring everywhere, drawn outside the control */
#moon-within-preview :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--a-ring);
  outline-offset: 3px;
}
#moon-within-preview .mw-nav button:focus-visible { outline-color: #fff; outline-offset: -3px; }
/* the selected tab is yellow: a white ring there is 1.41:1, so it gets dark teal (#204d59 on #f3d86a, 6.55:1) */
#moon-within-preview .mw-nav button[aria-pressed="true"]:focus-visible { outline-color: #204d59; }
/* the viewer sits on dark teal: its own light ring stays (placed after the generic rule) */
#mw-viewer :is(button, a, [tabindex]):focus-visible { outline: 3px solid #ffd27a; outline-offset: 2px; }
#mw-viewer .mwv-stage:focus-visible { outline: 3px solid #ffd27a; outline-offset: -3px; }
#moon-within-preview :is(input, select, textarea):focus-visible { outline-offset: 2px; }

/* 6. The document viewer is a sheet: it opens below the status area with rounded top corners over a
      dimmed page. The scrim is a plain colour (no blur) and catches taps, so the page behind cannot be hit. */
#mw-viewer {
  inset: calc(env(safe-area-inset-top, 0px) + var(--a-2)) 0 0 0;
  border-radius: var(--a-r-l) var(--a-r-l) 0 0;
  box-shadow: 0 -8px 32px rgb(0 0 0 / 0.25);
}
#mw-viewer::before {
  content: ""; position: fixed; inset: 0; z-index: -1; background: rgb(8 24 29 / 0.55);
}
#mw-viewer .mwv-bar {
  border-radius: var(--a-r-l) var(--a-r-l) 0 0;
  padding-top: var(--a-1);
  padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  border-bottom: 0.5px solid rgb(255 255 255 / 0.18);
}
#mw-viewer .mwv-title { font-size: var(--a-headline); line-height: 1.35; font-weight: 600; }
#mw-viewer .mwv-title small { font-size: 14px; font-weight: 400; }
#mw-viewer .mwv-tools {
  border-top: 0.5px solid rgb(255 255 255 / 0.18);
  padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: max(var(--a-1), env(safe-area-inset-bottom, 0px));
}
#mw-viewer button, #mw-viewer a.mwv-btn { border-radius: 14px; min-height: 48px; }
#mw-viewer .mwv-close { border-radius: 999px; padding-inline: 20px; }
#mw-viewer .mwv-level { font-size: 14px; }

/* 7. Narrow phones (320 to 360 px): keep the rhythm, give text the room. */
@media (max-width: 360px) {
  #moon-within-preview .mw-main { padding-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)); }
  #moon-within-preview { --a-large-title: 26px; }
  #moon-within-preview .mw-brand { font-size: 24px; }
  #moon-within-preview .mw-concern { padding-inline: 12px; }
  #moon-within-preview .mw-community-tabs button { min-width: 0; flex-basis: calc(50% - 4px); }
}

/* 8. Fallbacks. Reduced motion needs nothing here (this file adds no motion).
      Reduced transparency: the viewer scrim becomes opaque. More contrast: no soft shadows,
      darker edges. Forced colours: system borders only. */
@media (prefers-reduced-transparency: reduce) {
  #mw-viewer::before { background: #08181d; }
}
@media (prefers-contrast: more) {
  #moon-within-preview :is(.mw-action, .mw-topic, .mw-season, .mw-concern, .mw-note, .mw-bday-card, .mw-community-tabs button,
      .mw-recipe-card, .mw-daily-card, .mw-shopping, .mw-community-options, .mw-calendar-reminder, .mw-carb-panel) {
    box-shadow: none; border-color: #204d59;
  }
  #mw-viewer { box-shadow: none; }
  #mw-viewer .mwv-bar, #mw-viewer .mwv-tools { border-color: #fff; }
}
@media (forced-colors: active) {
  #moon-within-preview *, #mw-viewer { box-shadow: none !important; }
  /* the inset callout bars are shadows, so they return here as a thick start border; selects get a visible edge for the chevron-less look */
  #moon-within-preview :is(.mw-welcome-post, .mw-community-notice, .mw-note.mw-caution) { border-inline-start: 4px solid CanvasText; }
  #moon-within-preview select { border: 1px solid CanvasText; }
  #mw-viewer::before { background: Canvas; opacity: 0.6; }
}

/* placeholder text in the share box: the browser default grey is borderline; this is #4f666d on #fffafd, 5.9:1 (wording unchanged) */
#moon-within-preview textarea::placeholder { color: #4f666d; opacity: 1; }

/* the photo-scan confirmation row: the whole label is the tap target (44 px) */
#moon-within-preview .mw-scan-confirm { min-height: 44px; padding-block: 8px; }