/* OurWorld shared frontend design layer — Phase 1 baseline */
:root {
  --ow-sakura: #f7b8ce;
  --ow-sky: #9fcdf2;
  --ow-gold: #ffd596;
  --ow-ink: #31415e;
  --ow-ink-muted: #64708a;
  --ow-canvas: #fffafc;
  --ow-glass: rgba(255, 255, 255, 0.72);
  --ow-glass-strong: rgba(255, 255, 255, 0.9);
  --ow-line: rgba(49, 65, 94, 0.13);
  --ow-shadow: 0 16px 42px rgba(49, 65, 94, 0.12);
  --ow-radius-sm: 12px;
  --ow-radius: 18px;
  --ow-radius-lg: 28px;
  --ow-focus: 0 0 0 3px rgba(159, 205, 242, 0.58);
  --ow-font: Inter, ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ow-content: 1120px;
  --ow-space: clamp(16px, 3vw, 32px);
}

html { color: var(--ow-ink); font-family: var(--ow-font); text-rendering: optimizeLegibility; }
body { color: var(--ow-ink); accent-color: var(--ow-sakura); }
body.ow-feature-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(247,184,206,.22), transparent 30rem),
    radial-gradient(circle at 90% 8%, rgba(159,205,242,.22), transparent 28rem),
    linear-gradient(180deg, #fffdfd, var(--ow-canvas));
}

.ow-shell { width: min(calc(100% - 2 * var(--ow-space)), var(--ow-content)); margin-inline: auto; }
.ow-feature-header { background: var(--ow-glass); border-bottom: 1px solid var(--ow-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ow-feature-header__inner { width: min(calc(100% - 2 * var(--ow-space)), var(--ow-content)); margin-inline: auto; padding-block: 16px; }
.ow-back-home { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ow-ink); font-weight: 650; text-decoration: none; }
.ow-back-home:hover { color: #b34f78; }

.ow-button, .ow-icon-button, .ow-chip,
body.ow-feature-page button, body.ow-feature-page [role="button"] {
  min-height: 44px;
  border-radius: var(--ow-radius-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
.ow-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid transparent; background: linear-gradient(135deg, var(--ow-sakura), var(--ow-gold)); color: var(--ow-ink); font-weight: 700; box-shadow: 0 8px 22px rgba(247,184,206,.25); }
.ow-button--secondary { background: var(--ow-glass-strong); border-color: var(--ow-line); box-shadow: none; }
.ow-icon-button { inline-size: 44px; padding: 0; display: inline-grid; place-items: center; }
.ow-button:hover, .ow-icon-button:hover, body.ow-feature-page button:hover { transform: translateY(-1px); }

.ow-field, body.ow-feature-page input:not([type="checkbox"]):not([type="radio"]), body.ow-feature-page select, body.ow-feature-page textarea {
  min-height: 44px;
  border-radius: var(--ow-radius-sm);
  border-color: var(--ow-line);
}
.ow-field { width: 100%; padding: 10px 13px; border: 1px solid var(--ow-line); background: var(--ow-glass-strong); color: var(--ow-ink); }
textarea.ow-field, body.ow-feature-page textarea { min-height: 112px; }
.ow-chip { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid var(--ow-line); background: var(--ow-glass); color: var(--ow-ink); white-space: nowrap; }
.ow-chip[aria-pressed="true"], .ow-chip.is-active { border-color: var(--ow-sakura); background: rgba(247,184,206,.24); }

.ow-card { border: 1px solid var(--ow-line); border-radius: var(--ow-radius); background: var(--ow-glass); box-shadow: var(--ow-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ow-dialog, .ow-drawer { border: 1px solid var(--ow-line); border-radius: var(--ow-radius-lg); background: var(--ow-glass-strong); color: var(--ow-ink); box-shadow: var(--ow-shadow); }
.ow-dialog::backdrop { background: rgba(49,65,94,.32); backdrop-filter: blur(4px); }
.ow-notice { padding: 12px 16px; border: 1px solid rgba(255,213,150,.72); border-radius: var(--ow-radius-sm); background: rgba(255,213,150,.22); }
.ow-empty, .ow-error { padding: clamp(28px, 7vw, 64px) 20px; text-align: center; color: var(--ow-ink-muted); }
.ow-error { color: #9d4059; background: rgba(247,184,206,.14); border-radius: var(--ow-radius); }
.ow-skeleton { border-radius: 10px; color: transparent !important; background: linear-gradient(100deg, rgba(159,205,242,.15) 20%, rgba(255,255,255,.72) 38%, rgba(247,184,206,.16) 56%); background-size: 220% 100%; animation: ow-shimmer 1.4s linear infinite; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ow-sky); outline-offset: 3px; box-shadow: var(--ow-focus); }
@keyframes ow-shimmer { to { background-position-x: -220%; } }

@media (max-width: 767px) {
  :root { --ow-space: 16px; --ow-radius-lg: 22px; }
  .ow-feature-header__inner { padding-block: 12px; }
  .ow-button { width: 100%; }
}
@media (min-width: 768px) and (max-width: 1023px) { :root { --ow-space: 24px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Phase 2 feature pages — progressive visual layer; data and API behavior remain untouched. */
body.ow-phase2 { font-family: var(--ow-font); color: var(--ow-ink); }
body.ow-phase2 > main > main { background: transparent !important; }
body.ow-phase2 header.sticky { background: rgba(255,255,255,.78) !important; border-color: var(--ow-line) !important; backdrop-filter: blur(18px); }
body.ow-phase2 h1, body.ow-phase2 h2 { color: var(--ow-ink); letter-spacing: -.025em; }
body.ow-phase2 .ow-phase-card { border-color: var(--ow-line) !important; background: var(--ow-glass) !important; box-shadow: var(--ow-shadow); backdrop-filter: blur(14px); }
body.ow-phase2 .ow-phase-field { border-color: var(--ow-line) !important; background: rgba(255,255,255,.84) !important; color: var(--ow-ink) !important; }
body.ow-phase2 button:disabled { cursor: not-allowed; filter: grayscale(.15); }
.ow-form-help { margin: -10px 2px 14px; color: var(--ow-ink-muted); font-size: .84rem; line-height: 1.5; }
.ow-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.ow-clamp.is-expanded { display: block; overflow: visible; }
.ow-expand { min-height: 36px !important; padding: 5px 10px; color: #a64f73; background: transparent; font-size: .86rem; }
.ow-memory-cta { width: fit-content; margin: -42px auto 44px; }

/* Diary: keep its book identity while aligning controls and states with the shared world. */
body.ow-phase2 .site { color: var(--ow-ink); }
body.ow-phase2 .site > header { padding: 20px clamp(14px,3vw,30px); border: 1px solid var(--ow-line); border-radius: var(--ow-radius-lg); background: var(--ow-glass); box-shadow: var(--ow-shadow); backdrop-filter: blur(16px); }
body.ow-phase2 .site .back { display: inline-flex; min-height: 44px; align-items: center; color: var(--ow-ink); }
body.ow-phase2 .site .filters { border: 1px solid var(--ow-line); background: rgba(255,255,255,.62); box-shadow: none; }
body.ow-phase2 .site .filters select, body.ow-phase2 .site .filters input { min-height: 44px; border-color: var(--ow-line); background: var(--ow-glass-strong); color: var(--ow-ink); }
body.ow-phase2 .site #status { min-height: 28px; color: var(--ow-ink-muted); }
body.ow-phase2 .site .pager button, body.ow-phase2 .site dialog button { min-height: 44px; border-color: var(--ow-line); border-radius: var(--ow-radius-sm); }
body.ow-phase2 .site dialog { border: 1px solid var(--ow-line); border-radius: var(--ow-radius-lg); background: var(--ow-glass-strong); color: var(--ow-ink); box-shadow: var(--ow-shadow); }
.ow-filter-toggle { display: none; margin: 12px auto 0; padding: 9px 16px; border: 1px solid var(--ow-line); background: var(--ow-glass-strong); color: var(--ow-ink); font-weight: 700; }

/* Map: clear-sky glass and a calmer wide-screen composition. */
body.ow-phase2:has(script[src*="/app/map/"]) { background: radial-gradient(circle at 85% 0,rgba(255,255,255,.86),transparent 34rem),linear-gradient(155deg,#dff3ff,#edf8ff 45%,#fffafd); }
body.ow-phase2:has(script[src*="/app/map/"]) header h1::before { content: '🗺️'; margin-right: 9px; }
body.ow-phase2:has(script[src*="/app/map/"]) header a[href="/"] { padding: 8px 12px; border: 1px solid rgba(70,145,196,.2); border-radius: 999px; background: rgba(255,255,255,.7); }
body.ow-phase2:has(script[src*="/app/map/"]) [class*="h-[300px]"] { min-height: clamp(360px,58vh,680px); }
body.ow-phase2:has(script[src*="/app/map/"]) [class*="max-w-7xl"] { max-width: 1440px; }
body.ow-phase2:has(script[src*="/app/map/"]) button[class*="rounded-full"] { border: 1px solid rgba(70,145,196,.2); box-shadow: 0 6px 18px rgba(67,145,195,.1); }
body.ow-phase2:has(script[src*="/app/map/"]) .ow-phase-card { border-color: rgba(70,145,196,.18) !important; }

/* Memory create: accessible form rhythm and mobile sticky completion action. */
body.ow-phase2:has(script[src*="/memory/create/"]) [class*="max-w-2xl"] { max-width: 780px; }
body.ow-phase2:has(script[src*="/memory/create/"]) label { color: var(--ow-ink) !important; font-weight: 700; }
body.ow-phase2:has(script[src*="/memory/create/"]) textarea { min-height: 150px; }
body.ow-phase2:has(script[src*="/memory/create/"]) button[class*="border-dashed"] { background: rgba(159,205,242,.09); border-color: rgba(92,157,205,.35) !important; color: #507899 !important; }
body.ow-phase2:has(script[src*="/memory/create/"]) [role="dialog"] > div { border: 1px solid var(--ow-line); background: var(--ow-glass-strong) !important; box-shadow: var(--ow-shadow); }

/* Timeline cards use predictable readable measure and clear states. */
body.ow-phase2:has(script[src*="/app/timeline/"]) { background: radial-gradient(circle at 15% 0,rgba(255,213,150,.18),transparent 28rem),linear-gradient(180deg,#fffdfc,#fff8fb); }
body.ow-phase2:has(script[src*="/app/timeline/"]) article, body.ow-phase2:has(script[src*="/app/timeline/"]) .ow-phase-card { overflow: hidden; }
body.ow-phase2:has(script[src*="/app/timeline/"]) p { overflow-wrap: anywhere; }

/* Memory diary: sakura-pink album layer. */
body.ow-phase2:has(script[src*="/memory-diary/"]) { background: radial-gradient(circle at 15% 4%,rgba(255,255,255,.9),transparent 24rem),radial-gradient(circle at 90% 6%,rgba(247,184,206,.38),transparent 30rem),linear-gradient(150deg,#fff8fb,#ffeaf2 56%,#fffafc); }
body.ow-phase2:has(script[src*="/memory-diary/"]) h1::before { content: '🌸'; margin-right: 9px; }
body.ow-phase2:has(script[src*="/memory-diary/"]) .ow-phase-card { border-color: rgba(215,111,151,.18) !important; box-shadow: 0 18px 46px rgba(197,104,141,.14); }

@media (max-width: 759px) {
  .ow-filter-toggle { display: inline-flex; align-items: center; justify-content: center; }
  body.ow-phase2 .site .filters { display: none; max-height: min(62vh,520px); overflow: auto; padding: 14px; }
  body.ow-phase2 .site .filters.is-open { display: flex; }
  body.ow-phase2 .site > header { padding: 15px 12px; }
  body.ow-phase2 .site .book-shell { box-shadow: 0 14px 36px rgba(89,89,134,.26),0 0 0 4px rgba(255,255,255,.42); }
  body.ow-phase2:has(script[src*="/memory/create/"]) .ow-create-action { position: sticky; bottom: 10px; z-index: 15; box-shadow: 0 12px 30px rgba(170,86,121,.28); }
  body.ow-phase2:has(script[src*="/app/map/"]) [class*="h-[300px]"] { min-height: 390px; }
  .ow-memory-cta { width: calc(100% - 32px); }
}