/* Minimal utility CSS generated from HTML prototypes */
:root {
  --color-primary: #00A79D;
  --color-bg-light: #ffffff;
  --color-bg-dark: #0A2E36;
  --color-container-light: #ffffff;
  --color-container-dark: #0f2730;
  --color-text: #0A2E36;
  --color-text-secondary: #4b5563;
  --color-subtle: #94a3b8;
  --color-border: #e5e7eb;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-bg-light);
  color: var(--color-text);
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { cursor: pointer; }
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.appearance-none{appearance:none;}
.pb-4{padding-bottom:1rem;}
.dark .dark\:text-white{color:#ffffff;}
.h-9{height:2.25rem;}
.backdrop-blur-sm{backdrop-filter:blur(4px);}
.text-base{font-size:1rem;line-height:1.5rem;}
.bg-background-light{background-color:#ffffff;}
.form-select{border:1px solid var(--color-border);padding:0.75rem;border-radius:0.5rem;appearance:none;}
.pt-16{padding-top:4rem;}
.transition-colors{transition:color 150ms ease, background-color 150ms ease, border-color 150ms ease;}
.bg-gray-200{background-color:#e5e7eb;}
.mt-6{margin-top:1.5rem;}
.gap-4{gap:1rem;}
.border-border-light{border-color:var(--color-border);}
.justify-between{justify-content:space-between;}
.flex-1{flex:1 1 0%;}
.border-gray-300\/70{border-color:rgba(209, 213, 219, 0.7);}
.rounded-full{border-radius:9999px;}
.min-w-0{min-width:0;}
.pt-8{padding-top:2rem;}
.focus\:ring-primary\/30:focus{box-shadow:0 0 0 2px rgba(0,167,157,0.30);}
.overflow-hidden{overflow:hidden;}
.min-h-screen{min-height:100vh;}
.items-center{align-items:center;}
.dark .dark\:placeholder\:text-gray-500::placeholder{color:#6b7280;}
.w-9{width:2.25rem;}
.bg-primary{background-color:#00A79D;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.p-4{padding:1rem;}
.max-w-sm{max-width:24rem;}
.mt-1{margin-top:0.25rem;}
.shadow-inner{box-shadow:inset 0 2px 4px rgba(0,0,0,0.06);}
.duration-200{transition-duration:200ms;}
.form-input{border:1px solid var(--color-border);padding:0.75rem;border-radius:0.5rem;}
.shadow-2xl{box-shadow:0 20px 25px rgba(0,0,0,0.15);}
.gap-1{gap:0.25rem;}
.top-0{top:0;}
.dark .dark\:bg-slate-800\/50{background-color:rgba(30,41,59,0.5);}
.w-12{width:3rem;}
.mt-4{margin-top:1rem;}
.mr-1{margin-right:0.25rem;}
.mt-2{margin-top:0.5rem;}
.justify-center{justify-content:center;}
.active\:bg-gray-100:active{background-color:#f3f4f6;}
.p-3\.5{padding:0.875rem;}
.bg-black\/40{background-color:rgba(0, 0, 0, 0.4);}
.h-12{height:3rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.hover\:bg-gray-50:hover{background-color:#f9fafb;}
.flex-col{flex-direction:column;}
.shadow-xl{box-shadow:0 10px 15px rgba(0,0,0,0.12);}
.active\:scale-95:active{transform:scale(0.95);}
.font-medium{font-weight:500;}
.tracking-\[0\.015em\]{letter-spacing:0.015em;}
.text-\[\#0A2E36\]{color:#0A2E36;}
.text-text-secondary-light{color:#4b5563;}
.p-2{padding:0.5rem;}
.z-20{z-index:20;}
.bg-gray-50{background-color:#f9fafb;}
.focus\:outline-0:focus{outline:none;}
.bg-black\/30{background-color:rgba(0, 0, 0, 0.3);}
.pb-2{padding-bottom:0.5rem;}
.font-normal{font-weight:400;}
.text-gray-900{color:#111827;}
.justify-end{justify-content:flex-end;}
.shrink-0{flex-shrink:0;}
.p-3{padding:0.75rem;}
.pt-2{padding-top:0.5rem;}
.bg-center{background-position:center;}
.material-symbols-outlined{font-family:'Material Symbols Outlined', 'Segoe UI Symbol', sans-serif;font-weight:400;font-style:normal;font-size:0!important;line-height:1;color:transparent!important;width:1.25rem;height:1.25rem;overflow:hidden;display:inline-block;}
.dark .dark\:border-gray-700{border-color:#374151;}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.06);}
.pl-5{padding-left:1.25rem;}
.bg-no-repeat{background-repeat:no-repeat;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gap-2{gap:0.5rem;}
.pb-10{padding-bottom:2.5rem;}
.text-white{color:#ffffff;}
.hover\:bg-gray-200:hover{background-color:#e5e7eb;}
.text-gray-700{color:#374151;}
.font-semibold{font-weight:600;}
.resize-none{resize:none;}
.text-text-primary-light{color:#0A2E36;}
.gap-3{gap:0.75rem;}
.bg-white{background-color:#ffffff;}
.light{}
.overflow-x-hidden{overflow-x:hidden;}
.text-subtle-light{color:#94a3b8;}
.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,0.08);}
.text-text-light{color:#0A2E36;}
.flex{display:flex;}
.transition-transform{transition:transform 150ms ease;}
.pt-4{padding-top:1rem;}
.dark .dark\:text-subtle-dark{color:var(--color-subtle, #cbd5e1);}
.block{display:block;}
.text-gray-400{color:#9ca3af;}
.hidden{display:none;}
.pt-5{padding-top:1.25rem;}
.p-5{padding:1.25rem;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-gray-800{color:#1f2937;}
.bg-black\/50{background-color:rgba(0, 0, 0, 0.5);}
.h-full{height:100%;}
.text-gray-600{color:#4b5563;}
.mx-3{margin-left:0.75rem;margin-right:0.75rem;}
.z-30{z-index:30;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.dark .dark\:text-gray-300{color:#d1d5db;}
.text-primary{color:#00A79D;}
.border-white{border-color:#ffffff;}
.sticky{position:-webkit-sticky;position:sticky;}
.min-w-\[84px\]{min-width:84px;}
.pb-8{padding-bottom:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.max-w-\[480px\]{max-width:480px;}
.leading-tight{line-height:1.25;}
.group\\\/design-root{}
.object-cover{object-fit:cover;}
.text-center{text-align:center;}
.focus\:ring-primary:focus{box-shadow:0 0 0 2px rgba(0,167,157,0.35);}
.text-gray-500{color:#6b7280;}
.dark .dark\:text-gray-100{#f3f4f6;}
.mb-3{margin-bottom:0.75rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.dark .dark\:bg-background-dark{background-color:var(--color-bg-dark);}
.z-10{z-index:10;}
.dark .dark\:text-gray-200{color:#e5e7eb;}
.rounded-lg{border-radius:0.5rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.border-gray-200{border-color:#e5e7eb;}
.text-zinc-900{color:#18181b;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.focus\:ring-2:focus{box-shadow:0 0 0 2px rgba(0,167,157,0.25);}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.h-16{height:4rem;}
.dark .dark\:border-border-dark{border-color:#1f2937;}
.dark .dark\:bg-slate-700{background-color:#334155;}
.border-gray-200\/80{border-color:rgba(229, 231, 235, 0.8);}
.text-xs{font-size:0.75rem;line-height:1rem;}
.h-14{height:3.5rem;}
.inset-0{top:0;right:0;bottom:0;left:0;}
.rounded-xl{border-radius:0.75rem;}
.h-10{height:2.5rem;}
.absolute{position:absolute;}
.mt-3{margin-top:0.75rem;}
.items-stretch{align-items:stretch;}
.leading-normal{line-height:1.5;}
.border-2{border-width:2px;border-style:solid;border-color:var(--color-border);}
.hover\:bg-primary\/90:hover{background-color:rgba(0,167,157,0.9);}
.relative{position:relative;}
.px-4{padding-left:1rem;padding-right:1rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.gap-1\.5{gap:0.375rem;}
.focus\:ring-0:focus{box-shadow:none;}
.pb-3{padding-bottom:0.75rem;}
.pb-1{padding-bottom:0.25rem;}
.p-\[15px\]{padding:15px;}
.tracking-\[-0\.015em\]{letter-spacing:0.015em;}
.pt-1{padding-top:0.25rem;}
.w-full{width:100%;}
.pb-6{padding-bottom:1.5rem;}
.flex-wrap{flex-wrap:wrap;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.bg-gray-100{background-color:#f3f4f6;}
.bg-gray-300\/70{background-color:rgba(209, 213, 219, 0.7);}
.placeholder\:text-subtle-light::placeholder{color:var(--color-subtle);}
.dark .dark\:text-gray-500{color:#6b7280;}
.bg-cover{background-size:cover;}
.placeholder\:text-gray-400::placeholder{color:#9ca3af;}
.font-bold{font-weight:700;}
.pt-6{padding-top:1.5rem;}
.focus\:border-primary:focus{border-color:var(--color-primary);}
.h-auto{height:auto;}
.bg-white\/95{background-color:rgba(255, 255, 255, 0.95);}
.fixed{position:fixed;}
.border-gray-300{border-color:#d1d5db;}
.border{border:1px solid var(--color-border);}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.border-t{border-top:1px solid var(--color-border);}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.w-10{width:2.5rem;}
.pt-3{padding-top:0.75rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.cursor-pointer{cursor:pointer;}
.focus\:outline-none:focus{outline:none;}
.grid{display:grid;}

/* MENU overlay responsiveness */
#menuOverlay {
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#menuOverlay:not(.hidden) {
  display: flex;
}
#menuOverlay .menu-card {
  width: min(28rem, 100%);
  margin: 0 auto;
  max-height: min(calc(100dvh - 2rem), calc(100vh - 2rem), 92vh);
  overflow-y: auto;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/* Keep the MENU button text readable on the green bar */
#menuButton {
  background-color: #ffffff;
  color: var(--color-primary) !important;
  border-color: #ffffff;
  justify-content: center;
  font-weight: 700;
}
#menuButton .material-symbols-outlined {
  display: none;
}