/* My Mandaluyong — resident app: design tokens & base (phone app + web portal) */
:root{
  /* brand */
  --primary: #0B2A5B;        /* city navy */
  --primary-2: #1F5FBF;
  --primary-soft: #E6EDF8;
  --accent: #167347;         /* done / linked / live */
  --accent-soft: #DFF2E7;
  --sun: #F5B71F;
  --sun-soft: #FDF0CC;

  /* surfaces & ink */
  --bg: #FFFFFF;
  --bg-elev: #F4F7FC;
  --surface-page: #F1F4F9;   /* page behind the home cards */
  --ink: #121A2B;
  --ink-2: #3E4A5F;
  --ink-3: #566173;
  --line: #DCE3EE;
  --line-2: #EAEFF6;
  --placeholder: #5A6576;    /* ≥4.5:1 on --bg and --bg-elev */

  /* states */
  --warning: #86560A;
  --warn-soft: #FFF4E0;
  --warn-line: #F3D9A6;
  --warn-ink: #5C3B00;
  --warn-ink-2: #7A4E00;
  --danger: #C8242F;
  --danger-soft: #FBE3E4;
  --danger-ink: #7A1720;
  --req: #A61B26;            /* required marks, destructive actions */
  --emergency: #B81F29;      /* emergency hotlines / "is anyone in danger" */
  --info-soft: #EEF3FC;      /* unread rows */
  --info-ink: #0F4592;
  --scrim: rgba(6,16,38,0.62);

  /* focus */
  --focus: #1F5FBF;
  --focus-on-dark: #FFD45C;  /* ≥3:1 on navy, photo hero and the red emergency card */

  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button{ font-family: inherit; }

/* phone screen container */
.eko-screen{
  width: 100%; min-height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 1rem; line-height: 1.45;
  position: relative; display: flex; flex-direction: column;
}
.eko-screen *{ box-sizing: border-box; }

/* ── primitives ─────────────────────────────────────── */
.mono { font-family: var(--sans); }
.muted{ color: var(--ink-3); }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height: 48px; padding: 8px 20px; border-radius: 999px; border: 0;
  font-weight: 600; font-size: 1rem; line-height: 1.25; text-align: center; cursor: pointer;
  transition: transform .08s ease, background .15s;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--primary); color: #fff; }
.btn-ghost  { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-block  { width: 100%; }
.btn-sm     { min-height: 44px; padding: 6px 14px; font-size: 0.9375rem; }

.card{ background: var(--bg-elev); border: 1px solid var(--line); border-radius: 18px; }

/* status pill */
.pill{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; font-size: 0.875rem; font-weight: 500; }

/* offline banner */
.offline-banner{
  background: var(--ink); color: #fff; font-size: 0.875rem; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px; justify-content: center;
}

/* tab bar */
.tabbar{
  display:flex; align-items:center; justify-content:space-around;
  padding: 8px 4px 12px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.tabbar button{
  appearance:none; border:0; background:transparent; color: var(--ink-3);
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding: 6px 4px; flex: 1 1 0; min-width: 0; cursor:pointer;
  font-size: 0.75rem; letter-spacing: 0.02em; font-weight: 500;
}

.tabbar .tab-l{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabbar button.active{ color: var(--primary); }
.tabbar button .dot{ width: 38px; height: 22px; border-radius: 999px; display:flex; align-items:center; justify-content:center; transition: background .15s; }
.tabbar button.active .dot{ background: var(--primary-soft); }
/* very large text (200% / Android font scaling): icons only, labels stay as the accessible names */
html.big-text .tabbar .tab-l{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
html.big-text .tabbar button .dot{ width: 44px; height: 32px; }

/* scroll-y body inside screen */
.scroll{ flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.scroll::-webkit-scrollbar{ width:0; }

/* fade transitions */
.screen-enter{ animation: fadeUp .28s ease both; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

/* link-ish */
.linkish{ color: var(--primary); font-weight: 600; cursor: pointer; }

/* ── dialogs: bottom sheet, centred dialog, scrim ── */
.sheet-backdrop{
  position:absolute; inset:0; background: rgba(20,17,12,0.4); z-index: 50;
  display:flex; align-items:flex-end; justify-content: center;
  animation: fade .2s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.sheet{
  width: 100%; max-width: 480px; background: var(--bg);
  border-radius: 22px 22px 0 0; padding: 8px 0 18px;
  animation: sheetUp .28s cubic-bezier(.2,.8,.2,1);
  max-height: 80%;
  display:flex; flex-direction: column;
}
@keyframes sheetUp{ from{ transform: translateY(40px); opacity:0;} to{ transform:none; opacity:1;} }
.sheet-handle{ width: 40px; height: 4px; background: var(--line); border-radius: 999px; margin: 8px auto 4px; }
.sheet-head{ display:flex; align-items:flex-start; gap:8px; padding: 6px 10px 4px 18px; }
.sheet-x, .icon-btn{ appearance:none; flex-shrink:0; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.dialog-scrim{ position:absolute; inset:0; z-index:90; background: var(--scrim); display:flex; align-items:center; justify-content:center; padding:22px; animation: fadeUp .25s ease both; }
.lightbox{ position:absolute; inset:0; z-index:92; background: rgba(6,16,38,0.92); display:flex; flex-direction:column; }
.lightbox img{ flex:1; min-height:0; width:100%; object-fit:contain; }
.lightbox .icon-btn{ margin: 10px 10px 10px auto; }

/* segmented chip strip */
.chips{ display:flex; gap: 8px; overflow-x: auto; padding: 2px; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; color: var(--ink-2);
  background: transparent; border: 1px solid var(--line); cursor: pointer;
  white-space: nowrap;
}
.chip.active{ background: var(--ink); color: #fff; border-color: var(--ink); }

/* choice cards (radio groups: payment channel, bank, survey answers) */
.choice{ appearance:none; cursor:pointer; font-family:inherit; text-align:left; display:flex; align-items:center; gap:12px; min-height:48px; border-radius:14px; padding:12px 14px; background:var(--bg-elev); border:1.5px solid var(--line); color:var(--ink); font-size:1rem; }
.choice[aria-checked="true"]{ background:var(--primary-soft); border-color:var(--primary); }
.choice .radio-dot{ width:20px; height:20px; border-radius:50%; flex-shrink:0; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; }
.choice[aria-checked="true"] .radio-dot{ border-color:var(--primary); background:var(--primary); }
.choice[aria-checked="true"] .radio-dot::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; }

/* home: common services grid — 3 across, 2 across when text is very large */
.cs-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(6rem, calc(50% - 4px)), 1fr)); row-gap:16px; column-gap:4px; }
.web-common{ display:grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, calc(50% - 4px)), 1fr)); gap:8px; }

/* AI assistant: typing indicator */
.typing{ display:inline-flex; gap:5px; align-items:center; padding:13px 15px; border-radius:16px 16px 16px 4px; background:var(--bg-elev); }
.typing span{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:typing 1.1s ease-in-out infinite; }
.typing span:nth-child(2){ animation-delay:.15s; } .typing span:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ opacity:.35; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }
@media (prefers-reduced-motion: reduce){ .typing span{ animation:none; opacity:.7; } }

/* Chat: the review card for a request gathered in conversation */
.draft{ margin-top:8px; padding:14px 14px 4px; border:1px solid var(--line); border-radius:14px; background:var(--bg); max-width:100%; }
.draft-h{ font-weight:700; font-size:1rem; }
.draft-kind{ display:inline-block; margin:6px 0 12px; padding:4px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary); font-weight:600; font-size:0.875rem; }
.draft-done{ padding:14px; }
.chat-act{ margin-top:6px; appearance:none; cursor:pointer; font-family:inherit; border:1px solid var(--primary); background:var(--primary-soft); color:var(--primary); border-radius:999px; min-height:44px; padding:8px 14px; font-size:0.9375rem; font-weight:700; display:inline-flex; align-items:center; gap:6px; text-align:left; }

/* Forms */
.kind-guess{ margin-top:8px; font-size:0.9375rem; color:var(--ink-2); line-height:1.5; }
.kind-list-l{ display:block; font-size:0.9375rem; font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.req{ color:var(--req); font-weight:700; }
.opt{ color:var(--ink-3); font-weight:500; }
.req-note{ font-size:0.875rem; color:var(--ink-3); margin:0 0 14px; }
.who-line{ display:flex; gap:8px; align-items:flex-start; font-size:0.9375rem; color:var(--ink-2); background:var(--bg-elev); border-radius:12px; padding:10px 12px; margin-bottom:10px; line-height:1.45; }
.who-line svg{ flex-shrink:0; margin-top:3px; color:var(--ink-3); }
.restored{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px; border-radius:12px; background:#E8F0FB; color:var(--info-ink); font-size:0.9375rem; margin-bottom:14px; }
.emerg{ border-radius:14px; background:var(--emergency); color:#fff; padding:14px; margin-bottom:16px; }
.emerg-t{ font-weight:700; font-size:1.0625rem; }
.emerg-call{ display:flex; align-items:center; justify-content:center; gap:8px; margin:10px 0 8px; min-height:52px; border-radius:12px; background:#fff; color:var(--emergency); font-weight:800; font-size:1.125rem; text-decoration:none; }
.emerg-s{ font-size:0.9375rem; line-height:1.45; }
.mic{ display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:8px; padding:0 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--primary); font:inherit; font-size:0.9375rem; font-weight:600; cursor:pointer; }
.mic.on{ border-color:var(--req); color:var(--req); }
.mic-dot{ width:9px; height:9px; border-radius:50%; background:var(--req); animation:typing 1.1s ease-in-out infinite; }
.dupe{ border:1.5px solid #9DB8E3; background:#F2F6FD; border-radius:14px; padding:14px; margin-bottom:16px; }
.dupe-t{ font-weight:700; font-size:1rem; color:var(--info-ink); }
.dupe-s{ font-size:0.9375rem; color:var(--ink-2); margin-top:4px; line-height:1.45; }
.dupe-a{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } .dupe-a .btn{ flex:1 1 150px; }
.dupe-n{ font-size:0.875rem; color:var(--ink-3); margin-top:8px; }
.undo{ margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:0.9375rem; color:var(--ink-2); }
.undo-a{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; } .undo .linkish{ font-size:0.9375rem; color:var(--req); min-height:44px; }
.waiting{ position:absolute; left:10px; right:10px; bottom:84px; z-index:95; display:flex; gap:8px; align-items:center; justify-content:center; padding:10px 12px; border-radius:12px; background:var(--sun-soft); color:var(--warn-ink); font-size:0.9375rem; font-weight:600; }
.also{ display:flex; gap:8px; align-items:flex-start; padding:12px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:0.9375rem; line-height:1.45; margin-bottom:14px; }
.web-root .waiting{ position:fixed; left:auto; right:24px; bottom:24px; width:320px; }
.chat-hbtn{ appearance:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--primary); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.chat-hist{ position:absolute; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; }
.hist-row{ display:flex; flex-direction:column; gap:3px; width:100%; text-align:left; appearance:none; border:0; border-top:1px solid var(--line-2); background:none; padding:12px 4px; font:inherit; font-size:0.9375rem; color:var(--ink); cursor:pointer; }
.hist-row b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-msg{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:0.9375rem; line-height:1.45; white-space:pre-line; background:var(--bg-elev); }
.hist-msg.user{ background:var(--primary); color:#fff; }
.welcome-x{ position:absolute; top:8px; right:8px; z-index:2; width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,0.16); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.welcome-x:hover{ background:rgba(255,255,255,0.28); }
.confirm{ border:1.5px solid #E7C66B; background:#FFF8E6; border-radius:14px; padding:14px; margin-bottom:16px; font-size:0.9375rem; line-height:1.45; color:#3D2A00; }
.confirm.ok{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); display:flex; gap:8px; align-items:center; font-weight:600; }
.confirm-t{ font-weight:700; font-size:1.0625rem; margin-bottom:10px; }
.confirm-a{ display:flex; gap:8px; flex-wrap:wrap; } .confirm-a .btn{ flex:1 1 150px; }

/* photo picker: the real file input is visually hidden; its label shows the focus ring */
.photo-pick{ position:relative; display:flex; align-items:center; gap:12px; border:1.5px dashed #8D97A6; border-radius:14px; padding:12px; cursor:pointer; background:var(--bg-elev); min-height:72px; }
.photo-pick input{ position:absolute; width:1px; height:1px; opacity:0; }
.photo-pick:focus-within{ outline:3px solid var(--focus); outline-offset:2px; }
.case-photo{ appearance:none; border:0; padding:0; background:none; cursor:zoom-in; border-radius:10px; display:block; width:100%; }
.case-photo img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; background:var(--bg-elev); }

/* toast: one persistent live region; the alert inside it is a button */
.toast-region{ position:absolute; top:10px; left:10px; right:10px; z-index:96; pointer-events:none; }
.toast-region > *{ pointer-events:auto; }
.web-root .toast-region{ position:fixed; top:84px; right:24px; left:auto; width:380px; }
.toast{ width:100%; appearance:none; border:0; cursor:pointer; font-family:inherit; text-align:left; background:var(--primary); color:#fff; border-radius:16px; padding:12px 14px; display:flex; gap:11px; align-items:center; box-shadow:0 14px 34px rgba(8,20,48,0.35); animation:fadeUp .25s ease both; }

/* guest gate */
.gate{ text-align:center; padding:40px 22px; }
.gate h1{ font-size:1.375rem; font-weight:700; margin:16px 0 6px; }
.gate p{ font-size:1rem; color:var(--ink-2); line-height:1.55; margin:0 auto 18px; max-width:30ch; }
[role="dialog"]:focus{ outline:none; }