/* Shared Mealmory website interface: semantic colors, accessible controls, and responsive navigation. */
:root {
  color-scheme: light;
  --paper:#FCF5EB; --paper-deep:#FEF5EE;
  --card:#FEFAF4; --card-soft:#FAF0E4;
  --ink:#74503F; --ink-strong:#50362C; --ink-soft:#7F6253;
  --ink-faint:#8A6C5C; --gold:#D3B980; --rule:#DED1C3;
  --blue:#4C94D4; --blue-deep:#254B7A; --seal:#9E482F;
  --shadow:rgba(76,53,43,.13);
  --site-border:rgba(105,78,61,.30);
  --site-rule:rgba(105,78,61,.16);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --paper:#231F1C; --paper-deep:#1F1B19;
  --card:#302923; --card-soft:#2C2621;
  --ink:#E0BFA9; --ink-strong:#F0D6C4; --ink-soft:#CBB5A6;
  --ink-faint:#BAA18E; --gold:#B99A65; --rule:#453A31;
  --blue:#8CC5F5; --blue-deep:#BBDFFF; --seal:#FFAB90;
  --shadow:rgba(0,0,0,.38);
  --site-border:rgba(237,216,197,.30);
  --site-rule:rgba(237,216,197,.18);
}
body { color:var(--ink-strong); background:var(--paper); }
.page {
  background-image:repeating-linear-gradient(to bottom,transparent 0 35px,var(--site-rule) 36px) !important;
  background-color:var(--paper);
}
.nav {
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 91%,transparent);
  border-bottom-color:var(--site-rule);
}
.nav-inner { min-height:72px; height:auto; }
.nav-links { align-items:center; gap:clamp(10px,1.7vw,19px); }
.nav-links a { display:inline-flex; align-items:center; min-height:40px; color:var(--ink) !important; white-space:nowrap; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current] { color:var(--ink-strong) !important; }
.nav-links a[aria-current] { text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:7px; }
.site-controls { display:flex; align-items:center; gap:7px; flex:none; }
.site-control {
  min-width:42px; min-height:40px; display:inline-flex; justify-content:center; align-items:center;
  color:var(--ink-strong); background:var(--card); border:1px solid var(--site-border);
  border-radius:10px; padding:7px 10px; font:700 12px/1.25 var(--mono,ui-monospace,monospace);
  cursor:pointer; transition:background .15s ease,border-color .15s ease;
}
.site-control:hover { background:var(--card-soft); border-color:var(--ink-soft); }
.site-control[aria-pressed="true"] { border-color:var(--ink-soft); }
.site-control svg { display:block; width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:focus-visible { outline:3px solid var(--blue-deep); outline-offset:3px; }
a { text-underline-offset:3px; }
.hero, .feature, .memory-card, .privacy-note, .privacy-points, .paper, .path-card,
.stamp-note, .final-card, .contact, details.faq, .toc, .search-shell { color:var(--ink-strong); }
.button.secondary { background:var(--card); color:var(--ink-strong); border-color:var(--site-border); }
.button.primary, .contact .button { color:#33291E; }
html[data-theme="dark"] .feature,
html[data-theme="dark"] .paper,
html[data-theme="dark"] details.faq[open] {
  background:var(--card);
}
html[data-theme="dark"] .feature,
html[data-theme="dark"] .paper,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .privacy-points,
html[data-theme="dark"] .memory-card,
html[data-theme="dark"] .final-card,
html[data-theme="dark"] .contact,
html[data-theme="dark"] .path-card { border-color:var(--site-border); }
html[data-theme="dark"] .memory-card { background:var(--card-soft); }
html[data-theme="dark"] .eyebrow { background:var(--card-soft); border-color:var(--site-border); }
html[data-theme="dark"] .mini-note, html[data-theme="dark"] .meta, html[data-theme="dark"] .hero-meta,
html[data-theme="dark"] .memory-date { color:var(--ink-soft); }
html[data-theme="dark"] .tablecloth {
  background:linear-gradient(90deg,rgba(115,174,229,.12) 50%,transparent 50%),
    linear-gradient(rgba(115,174,229,.12) 50%,transparent 50%),#302B29;
  background-size:28px 28px;
  border-color:var(--site-border);
}
html[data-theme="dark"] .phone { background:#0D0E10; }
html[data-theme="dark"] .phone-screen { background:var(--paper); }
html[data-theme="dark"] .plate, html[data-theme="dark"] .stamp-plate { color:#493B2E; }
html[data-theme="dark"] .sticker, html[data-theme="dark"] .feature-icon { color:#453126; }
html[data-theme="dark"] .faq summary::after { color:var(--ink-strong); background:var(--card-soft); }
html[data-theme="dark"] .answer a, html[data-theme="dark"] .path-arrow,
html[data-theme="dark"] .empty a { color:var(--blue-deep); }
html[data-theme="dark"] .stamp-plate { background:radial-gradient(circle,#EDE7E2 0 46%,#B6D9F4 47% 56%,#F3EEE9 57% 68%,#4C94D4 69% 72%,#F5F1ED 73%); }
html[data-theme="dark"] .note { background:rgba(217,189,131,.14); }
html[data-theme="dark"] .search-shell input { color:var(--ink-strong); }
html[data-theme="dark"] .search-shell input::placeholder { color:var(--ink-soft); }
html[data-theme="dark"] .phone-ui, html[data-theme="dark"] .dish-caption { color:var(--ink-strong); }
html[data-theme="dark"] .day { border-color:var(--site-border); }
#features, #privacy, .faq-group, .paper h2, #contact { scroll-margin-top:110px; }
@media(max-width:900px) {
  .nav-inner { flex-wrap:wrap; padding:9px 0; gap:2px 16px; }
  .brand { min-height:44px; }
  .nav-links { width:100%; justify-content:flex-end; flex-wrap:wrap; gap:4px 15px; }
  .nav-links a, .nav-links a:not(.keep), .nav-links a:nth-child(3) {
    display:inline-flex !important; min-height:36px;
  }
}
@media(max-width:520px) {
  .nav-inner { justify-content:center; }
  .brand { justify-content:center; width:100%; }
  .nav-links { justify-content:center; gap:3px 13px; font-size:12px; }
  .nav-links a { min-height:33px; }
  .site-control { min-height:35px; min-width:36px; padding:5px 8px; }
  h1 { overflow-wrap:break-word; }
  .paper { overflow-wrap:anywhere; }
}
@media(prefers-reduced-motion:reduce) {
  .site-control { transition:none; }
}
@media print {
  .site-controls { display:none !important; }
  body, .page, .paper { background:#fff !important; color:#000 !important; }
  .page { background-image:none !important; }
}

/* Visible only on keyboard focus. */
.skip-link {
  position:fixed; left:16px; top:-110px; z-index:1000;
  background:var(--card); color:var(--ink-strong);
  padding:12px 18px; border:2px solid var(--blue-deep); border-radius:10px;
  font:700 13px/1.3 var(--mono,monospace); text-decoration:none;
}
.skip-link:focus { top:12px; }

/* Shared navbar: active page gets one rule, not the legacy border + underline. */
.nav .brand-icon { display:block;width:38px;height:38px;flex:none;border-radius:9px;object-fit:cover;box-shadow:0 2px 8px var(--shadow); }
.nav .brand { color:var(--ink-strong); }
.nav .nav-links { display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:clamp(9px,1.5vw,18px); }
.nav .nav-links a { position:relative;border-bottom:0 !important;padding-bottom:0 !important;text-decoration:none !important;font-weight:500; }
.nav .nav-links a[aria-current="page"] { font-weight:700; }
.nav .nav-links a[aria-current="page"]::after { content:"";position:absolute;height:2px;left:1px;right:1px;bottom:2px;background:var(--gold);border-radius:2px; }
.nav .site-controls { margin-left:8px; }
.nav a:focus-visible,.site-control:focus-visible { outline:3px solid var(--blue-deep);outline-offset:3px; }
/* App-original art: blue porcelain, checked tablecloth, and notebook tape. */
.tablecloth { background-image:url("assets/diary-swatch.png") !important;background-repeat:repeat !important;background-size:80px auto !important; }
.plate { background-image:url("assets/plate-little-blue.png") !important;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important;box-shadow:0 12px 24px rgba(67,48,41,.16) !important; }
.day.on { background-image:url("assets/diary-swatch.png");background-size:40px auto;font-weight:700;color:var(--ink-strong); }
.tape { background:transparent url("assets/diary-tape.png") center/100% 100% no-repeat !important;border:none !important;box-shadow:none !important; }
html[data-theme="dark"] .tablecloth { background-image:linear-gradient(rgba(33,43,46,.38),rgba(33,43,46,.38)),url("assets/diary-swatch.png") !important;background-size:auto,80px auto !important; }
html[data-theme="dark"] .day.on { background-image:linear-gradient(rgba(33,43,46,.4),rgba(33,43,46,.4)),url("assets/diary-swatch.png"); }
.app-objects { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px; }
.app-object { min-width:0;padding:14px;background:var(--card);border:1px solid var(--site-border);border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--ink-strong);font:700 12px/1.4 var(--mono,monospace);text-align:center; }
.app-object-visual { height:120px;width:100%;overflow:hidden;position:relative;border-radius:11px;background:var(--card-soft);display:grid;place-items:center; }
.app-object-visual img { display:block;max-width:100%;object-fit:contain; }
.object-plate img { width:104px;height:104px;filter:drop-shadow(0 6px 7px var(--shadow)); }
.object-cloth { background:url("assets/diary-swatch.png") center/80px auto repeat; }
.object-cloth .mini-plate { width:76px;height:76px;background:url("assets/plate-little-blue.png") center/contain no-repeat;filter:drop-shadow(0 5px 6px rgba(67,48,41,.17)); }
.object-tape img { width:104px;height:46px;transform:rotate(-7deg); }
html[data-theme="dark"] .object-cloth { background-image:linear-gradient(rgba(33,43,46,.38),rgba(33,43,46,.38)),url("assets/diary-swatch.png");background-size:auto,80px auto; }
@media(max-width:900px){.nav .site-controls{margin-left:0;}}
@media(max-width:520px){.nav .nav-inner{justify-content:center;}.nav .nav-links{justify-content:center;gap:5px 12px;}.nav .nav-links a{font-size:12px;}.app-objects{gap:8px;}.app-object{padding:8px 6px;font-size:10px;}.app-object-visual{height:88px;}.object-plate img{width:74px;height:74px;}.object-cloth .mini-plate{width:62px;height:62px;}.object-tape img{width:80px;}}
@media(prefers-reduced-motion:reduce){.plate,.tape{animation:none;}}

/* Language selector stays compact across iPhone and desktop navigation. */
.language-select { width:auto;max-width:128px;padding:6px 24px 6px 9px;font:inherit;cursor:pointer; }
@media(max-width:520px) {.language-select{max-width:110px;font-size:12px;}}

.translation-note { font-size: 14px; line-height: 1.55; margin: 12px 0 18px; padding: 11px 14px; border-left: 3px solid var(--gold); background: var(--card-soft); color: var(--ink); border-radius: 0 8px 8px 0; }
.translation-note[hidden] { display: none !important; }


/* Legal pages: the app's paper notebook, blue porcelain, and taped-in keepsake. */
.legal-hero {
  position:relative;min-height:260px;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(46px,6vw,72px) 0 36px;
}
.legal-hero .kicker,.legal-hero h1,.legal-hero .lead,.legal-hero .meta { position:relative;z-index:1; }
.legal-hero h1 { max-width:calc(100% - 170px);font-size:clamp(38px,5.7vw,66px);line-height:1.04;overflow-wrap:anywhere; }
.legal-hero .lead { max-width:min(690px,calc(100% - 140px));font-size:clamp(16px,1.8vw,18px);line-height:1.65; }
.legal-stamp {
  position:absolute;right:clamp(0px,2vw,20px);top:50%;width:clamp(112px,15vw,164px);
  aspect-ratio:1;transform:translateY(-42%) rotate(4deg);display:grid;place-items:center;pointer-events:none;
}
.legal-stamp::before {
  content:"";position:absolute;top:-4px;right:3px;width:72px;height:24px;
  background:url("assets/diary-tape.png") center/100% 100% no-repeat;transform:rotate(12deg);z-index:1;opacity:.95;
}
.legal-stamp img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 18px var(--shadow)); }
.paper {
  background:linear-gradient(135deg,color-mix(in srgb,var(--card) 94%,white),var(--card));
  border-color:var(--site-border);border-radius:22px;box-shadow:0 18px 48px var(--shadow);
}
.paper .toc {
  border:1px dashed var(--site-border);
  background:linear-gradient(115deg,color-mix(in srgb,var(--blue) 7%,transparent),transparent 70%),var(--card-soft);
}
.paper .toc a { display:inline-flex;padding:4px 0;color:var(--blue-deep); }
.paper h2 {
  font-family:var(--sans);letter-spacing:-.025em;color:var(--ink-strong);
  border-top:1px solid var(--site-rule);padding-top:20px;margin-top:34px;
}
.paper h2:first-of-type { border-top:0;padding-top:8px; }
.paper h3 { font-family:var(--sans);letter-spacing:-.01em;color:var(--ink-strong); }
.paper p,.paper li { line-height:1.78; }
.paper .note { border-left-color:var(--blue);background:color-mix(in srgb,var(--blue) 8%,var(--card-soft)); }
.paper .contact { border-color:var(--site-border);background:var(--card-soft); }
@media(max-width:620px) {
  .legal-hero { min-height:0;padding-top:48px; }
  .legal-hero h1 { max-width:100%;padding-right:44px;font-size:clamp(38px,11vw,54px); }
  .legal-hero .lead { max-width:100%;padding-right:6px; }
  .legal-stamp { width:68px;right:0;top:28px;transform:rotate(5deg);opacity:.24; }
  .legal-stamp::before { width:38px;height:13px;top:-1px; }
  .paper h2 { font-size:clamp(19px,5vw,22px); }
}
@media(hover:hover) {
  .feature,.memory-card,.app-object { transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
  .feature:hover,.memory-card:hover { transform:translateY(-3px);border-color:var(--site-border);box-shadow:0 14px 32px var(--shadow); }
}
@media(prefers-reduced-motion:reduce) { .feature,.memory-card,.app-object { transition:none; } }