/* Mobile app layout. Loaded after the established GloveCat design styles.
   The viewport adapter supplies pixel values for the visible-height/offset
   properties when available; CSS remains usable without JavaScript. */
:root {
  --app-safe-top: env(safe-area-inset-top, 0px);
  --app-safe-right: env(safe-area-inset-right, 0px);
  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --app-safe-left: env(safe-area-inset-left, 0px);
  --app-visible-height: 100vh;
  --app-visible-offset-top: 0px;
  --app-nav-height: 72px;
  --app-header-height: 68px;
  --app-dialog-gap: 16px;
  --app-dialog-padding: 24px;
  --app-dialog-max-height: calc(
    var(--app-visible-height) - var(--app-safe-top) -
    var(--app-safe-bottom) - var(--app-dialog-gap) * 2
  );
}

@supports (height: 100dvh) {
  :root { --app-visible-height: 100dvh; }
}

html { scroll-padding-top: calc(var(--app-header-height) + var(--app-safe-top) + 16px); }
body { min-width: 0; min-height: 100vh; }
button, a, summary { touch-action: manipulation; }
img { max-width: 100%; }
.header-inner, .page { max-width: 1120px; }
.page-heading > div, .settings-row .row-copy, .card-heading > h2 { min-width: 0; }
.page-heading p, .dialog-description, .form-hint, .settings-row p,
.card-intro, .gc-discovery-description, .gc-preview-note {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.goal-line { align-items: center; }
.goal-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 4px;
  text-align: right;
}
.review-detail summary, .app-footer button {
  min-height: 48px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.notice-banner button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 4px;
}
.text-input, .dialog-inner textarea { max-width: 100%; }

/* A native dialog stays inside the actual visible viewport, including when
   an on-screen keyboard reduces it. Do not impose a minimum dialog height. */
dialog {
  position: fixed;
  inset-inline-start: calc(var(--app-safe-left) + var(--app-dialog-gap));
  inset-inline-end: calc(var(--app-safe-right) + var(--app-dialog-gap));
  inset-block-start: calc(var(--app-visible-offset-top) + var(--app-safe-top) + var(--app-dialog-gap));
  inset-block-end: calc(
    max(0px, 100vh - var(--app-visible-height) - var(--app-visible-offset-top)) +
    var(--app-safe-bottom) + var(--app-dialog-gap)
  );
  width: 480px;
  height: fit-content;
  max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - var(--app-dialog-gap) * 2);
  max-height: var(--app-dialog-max-height);
  margin: auto;
  overflow: hidden;
}
.dialog-inner, .shop-dialog .dialog-inner {
  min-height: 0;
  max-height: var(--app-dialog-max-height);
  padding: var(--app-dialog-padding);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-top: 88px;
  scroll-padding-bottom: 96px;
}
.dialog-header {
  position: sticky;
  top: calc(var(--app-dialog-padding) * -1);
  z-index: 5;
  align-items: center;
  margin: calc(var(--app-dialog-padding) * -1) calc(var(--app-dialog-padding) * -1) 18px;
  padding: 12px var(--app-dialog-padding);
  border-bottom: 1px solid #e8ece4;
  background: #fff;
}
.dialog-header h2 {
  min-width: 0;
  margin-top: 0;
  overflow-wrap: anywhere;
}
.dialog-header .icon-button {
  flex: 0 0 48px;
  margin: 0 -8px 0 0;
}
.dialog-inner > .dialog-actions,
.dialog-inner > form > .dialog-actions {
  position: sticky;
  bottom: calc(var(--app-dialog-padding) * -1);
  z-index: 4;
  margin-inline: calc(var(--app-dialog-padding) * -1);
  margin-bottom: calc(var(--app-dialog-padding) * -1);
  padding: 12px var(--app-dialog-padding) var(--app-dialog-padding);
  border-top: 1px solid #e8ece4;
  background: #fff;
  box-shadow: 0 -8px 18px #ffffffeb;
}
.dialog-actions > .btn { min-width: 0; }

@media (max-width: 900px) {
  :root {
    --app-page-gutter: clamp(16px, 4.5vw, 24px);
    --app-dialog-gap: 12px;
    --app-dialog-padding: 20px;
  }
  .app-header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: calc(var(--app-header-height) + var(--app-safe-top));
    background: var(--cream);
  }
  .header-inner {
    max-width: 720px;
    gap: 12px;
    padding-top: var(--app-safe-top);
    padding-left: calc(var(--app-page-gutter) + var(--app-safe-left));
    padding-right: calc(var(--app-page-gutter) + var(--app-safe-right));
  }
  .brand { font-size: 26px; }
  .brand .icon { width: 24px; height: 24px; }
  .header-date { font-size: 12px; }
  .header-date .icon { display: none; }
  .main-nav {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-around;
    gap: 0;
    width: 100%;
    max-width: 720px;
    height: calc(var(--app-nav-height) + var(--app-safe-bottom));
    margin-inline: auto;
    padding: 8px calc(12px + var(--app-safe-right)) calc(8px + var(--app-safe-bottom)) calc(12px + var(--app-safe-left));
    border-top: 1px solid #dde2d7;
    background: #fffefa;
    backdrop-filter: none;
  }
  .nav-link {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 110px;
    min-height: 54px;
    gap: 3px;
    padding: 4px 0;
    border-radius: 10px;
    font-size: 13px;
  }
  .nav-link .icon { width: 23px; height: 23px; }
  .nav-link[aria-current="page"] { background: #edf2e7; }
  .keyboard-open .main-nav {
    visibility: hidden;
    pointer-events: none;
  }
  .page {
    width: 100%;
    max-width: 720px;
    padding-top: 24px;
    padding-left: calc(var(--app-page-gutter) + var(--app-safe-left));
    padding-right: calc(var(--app-page-gutter) + var(--app-safe-right));
    padding-bottom: calc(var(--app-nav-height) + var(--app-safe-bottom) + 24px);
  }
  .page-heading { align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .page-heading h1 { font-size: clamp(24px, 4vw, 30px); line-height: 1.45; }
  .page-heading p { font-size: 14px; line-height: 1.65; }
  .page-heading .local-chip { display: none; }
  .title-paw { width: 24px !important; height: 24px !important; }
  .today-grid, .records-layout, .goals-layout, .settings-layout, .review-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .card { min-width: 0; }
  .step-card { min-height: 0; }
  .step-actions { margin-top: 4px; }
  .step-actions .btn { min-height: 52px; white-space: normal; }
  .room-card > .room-stage { flex: none; min-height: 220px; height: clamp(220px, 44vw, 300px); }
  .room-card .room-scene-inner { height: auto; aspect-ratio: 3 / 2; }
  .room-card .room-background { height: auto; object-fit: initial; }
  .room-footer { flex-wrap: wrap; }
  .room-footer > div { min-width: 0; }
  .checkin-footer { flex-wrap: wrap; }
  .checkin-footer .btn { min-height: 48px; }
  .settings-layout .storage-card { order: 0; }
  .settings-row { gap: 12px; }
  .settings-row strong { font-size: 15px; }
  .settings-row p { font-size: 13px; line-height: 1.65; }
  .settings-row .btn { min-height: 48px; padding: 10px 12px; font-size: 14px; }
  .settings-row .toggle { margin-block: 10px; }
  .storage-fact, .card-intro, .form-hint, .dialog-note,
  .gc-discovery-description, .gc-discovery-hint,
  .gc-section-heading p, .gc-album-empty p,
  .gc-event-rules p, .gc-preview-note {
    font-size: 13px;
    line-height: 1.7;
  }
  .app-footer { align-items: flex-start; flex-direction: column; gap: 0; }
  .app-footer button { font-size: 12px; min-height: 48px; }
  .notice-banner { overflow-wrap: anywhere; }
  dialog { border-radius: 22px; }
  dialog.shop-dialog { width: 680px; }
  .dialog-header h2 { font-size: 23px; line-height: 1.45; }
  .dialog-description { font-size: 14px; line-height: 1.7; }
  .dialog-actions { gap: 10px; }
  .dialog-actions .btn { min-height: 48px; padding: 12px; font-size: 14px; }
  .shop-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .shop-preview { position: static; }
  .shop-preview .room-stage { max-height: 240px; aspect-ratio: 3 / 2; }
  .shop-preview .room-scene-inner { height: auto; aspect-ratio: 3 / 2; }
  .shop-preview .room-background { position: absolute; bottom: 0; height: auto; }
  .shop-items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .shop-item { min-width: 0; }
  .shop-item .item-name { font-size: 13px; overflow-wrap: anywhere; }
  .shop-item .item-meta { font-size: 12px; }
  .shop-selection-strip {
    position: sticky;
    bottom: calc(var(--app-dialog-padding) * -1);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    margin-inline: calc(var(--app-dialog-padding) * -1);
    margin-bottom: calc(var(--app-dialog-padding) * -1);
    padding: 12px var(--app-dialog-padding) var(--app-dialog-padding);
    border-top: 1px solid var(--line);
    background: #fffdf8;
    box-shadow: 0 -8px 16px #fffdf8e6;
  }
  .shop-selection-strip > span { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
  .shop-selection-strip small { display: block; font-size: 12px; color: var(--muted); }
  .shop-selection-strip .btn { flex-shrink: 0; min-height: 48px; font-size: 13px; }
  #toast {
    bottom: calc(var(--app-nav-height) + var(--app-safe-bottom) + 12px);
    width: max-content;
    max-width: calc(100vw - var(--app-safe-left) - var(--app-safe-right) - 32px);
    padding: 13px 18px;
    font-size: 13px;
  }
  .keyboard-open #toast {
    bottom: calc(max(0px, 100vh - var(--app-visible-height) - var(--app-visible-offset-top)) + var(--app-safe-bottom) + 12px);
  }
}

@media (max-width: 420px) {
  .brand { font-size: 24px; }
  .brand .icon { width: 22px; height: 22px; }
  .header-date { font-size: 11px; }
  .card { padding: 20px; }
  .room-card { padding: 0; }
  .weekdays { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .weekday { min-height: 48px; font-size: 15px; }
  .shop-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .shop-item { min-height: 126px; padding: 10px; }
  .item-thumbnail { height: 58px; }
  .shop-item .item-name { font-size: 13px; }
  .shop-intro-line { flex-wrap: wrap; gap: 10px; }
  .shop-selection-strip { align-items: stretch; flex-direction: column; }
  .shop-selection-strip .btn { width: 100%; }
  .shop-dialog .dialog-inner { scroll-padding-bottom: 150px; }
  .settings-row .btn { flex-shrink: 0; }
  .step-metric { gap: 10px; }
  .step-number { font-size: clamp(38px, 12.5vw, 52px); }
  .step-unit { font-size: 17px; }
  .progress-description { flex-wrap: wrap; gap: 5px; }
  .dialog-actions .reward-mini { font-size: 11px; }
  .dialog-inner > form > .dialog-actions .btn-primary { flex-wrap: wrap; gap: 4px 7px; }
}

@media (max-width: 900px) and (max-height: 500px) {
  :root {
    --app-header-height: 52px;
    --app-nav-height: 60px;
    --app-dialog-gap: 8px;
    --app-dialog-padding: 16px;
  }
  .brand { font-size: 23px; }
  .brand .icon { width: 21px; height: 21px; }
  .main-nav { padding-top: 6px; padding-bottom: calc(6px + var(--app-safe-bottom)); }
  .nav-link { min-height: 46px; gap: 0; padding-block: 2px; font-size: 12px; }
  .nav-link .icon { width: 20px; height: 20px; }
  .page { padding-top: 16px; }
  .page-heading { margin-bottom: 16px; }
  .dialog-header { padding-block: 8px; margin-bottom: 14px; }
  .dialog-header h2 { font-size: 21px; }
  .dialog-inner, .shop-dialog .dialog-inner { scroll-padding-top: 72px; scroll-padding-bottom: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  html, .dialog-inner { scroll-behavior: auto; }
}

/* Keep small footer copy readable against the cream surface. */
.app-footer{color:var(--muted)}

.app-footer .dot{display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;vertical-align:middle}

/* Keep feedback inside the active dialog and leave the current control focused. */
.dialog-feedback{
  position:sticky;
  top:calc(var(--dialog-header-height,72px) - var(--app-dialog-padding));
  z-index:4;
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid #b5c9ad;
  border-radius:10px;
  background:#edf4e9;
  color:#294d39;
  box-shadow:0 4px 12px #ffffffd9;
  font-size:14px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.dialog-feedback[hidden]{display:none}
.dialog-inner,.shop-dialog .dialog-inner{
  scroll-padding-top:calc(var(--dialog-header-height,72px) + var(--dialog-feedback-height,0px) + 16px);
}
.checkin-status{min-width:0;line-height:1.7;overflow-wrap:anywhere}
.step-actions>.btn:only-child{grid-column:1/-1}
.gc-discovery-selected.is-done{align-items:stretch;flex-direction:column}
.gc-discovery-followup{display:grid;gap:12px;width:100%;padding-top:14px;border-top:1px solid #ccd9c6}
.gc-discovery-followup p{margin:0;font-size:14px;line-height:1.7}
.gc-discovery-followup .btn{justify-self:start;max-width:100%;white-space:normal}
.gc-album-empty-actions{display:flex;justify-content:center;margin-top:18px}
.gc-album-empty-actions .btn{max-width:100%;white-space:normal;min-height:48px;font-size:14px}
#discovery-result:focus-visible,#shop-preview-title:focus-visible{outline:3px solid #bd7d2a;outline-offset:4px}
.week-chart{height:auto;min-height:276px;align-items:stretch}
.chart-day{height:auto}
.chart-space{flex:0 0 132px}
.chart-label{margin-bottom:0}
.summary-strip .summary-label{word-break:keep-all}
.chart-discovery{display:flex;min-height:22px;flex:0 0 22px;margin-bottom:8px;align-items:center;justify-content:center;color:#53633c}
.chart-discovery .icon,.discovery-legend .icon{width:17px;height:17px;flex:none}
.chart-legend{flex-wrap:wrap;row-gap:10px}
.discovery-legend{color:#53633c}
.detail-discovery{margin-top:22px;padding:18px;border:1px solid #d5dfc9;border-radius:14px;background:#f0f5e9;color:#344b32}
.detail-discovery-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.detail-discovery-heading>.icon{width:20px;height:20px;flex:none}
.detail-discovery-heading h3{font-size:15px;line-height:1.6;margin:0}
.discovery-kind{font-size:12px;line-height:1.5;padding:3px 8px;border-radius:6px;background:#dfe9d4;color:#3b5635}
.detail-discovery>strong{display:block;font-size:17px;line-height:1.6;overflow-wrap:anywhere}
.detail-discovery>p,.discovery-only-note{font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.detail-discovery>p{margin:8px 0 0}
.detail-discovery .text-button,.history-today-link{min-height:48px;margin-top:10px;white-space:normal}
.history-context{margin:0 0 18px;color:#566553;font-size:14px;line-height:1.7}
.history-return{display:flex;min-height:48px;gap:8px;margin-top:18px}
#history-detail:focus,#history-dates:focus{outline:none}
#history-detail:focus-visible,#history-dates:focus-visible{outline:3px solid #bd7d2a;outline-offset:4px}
@media(max-width:420px){
  .step-actions{grid-template-columns:minmax(0,1fr);gap:10px}
  .gc-discovery-followup .btn,.gc-album-empty-actions .btn{width:100%;justify-self:stretch}
}
/* Proposal drafts reuse the existing plan form without saving on selection. */
.gc-plan-source, .gc-plan-replacement {
  padding: 15px 16px;
  margin: 0 0 20px;
  border-radius: 12px;
  border: 1px solid #dce5d5;
  background: #f3f7ee;
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.gc-plan-source > strong { color: var(--forest); }
.gc-plan-source p, .gc-plan-replacement p { margin: 7px 0 0; }
.gc-plan-replacement { background: #faf6ed; border-color: #e9ddc8; }
.gc-plan-replacement[hidden] { display: none; }
.gc-plan-replacement .btn { margin-top: 14px; white-space: normal; }