/* Ghar Aacha v1.0 — phone-first styles. Role colours are placeholders until decided. */
:root {
  --ink: #1c1917; --muted: #78716c; --bg: #f5f5f4; --card: #fff; --line: #e7e5e4;
  --green: #14532d; --ok: #15803d; --bad: #b91c1c; --warn: #b45309; --yellow: #ca8a04;
  --owner: #1d4ed8; --representative: #3b82f6; --contractor: #c2410c; --munshi: #a16207;
  --architect: #7c3aed; --engineer: #0f766e; --inspector: #15803d; --system: #475569;
  font-size: 17px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.45; }
html[lang="ur"] body { font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Noto Naskh Arabic", system-ui, sans-serif; line-height: 2; }
main { max-width: 640px; margin: 0 auto; padding: 0 0 6rem; }
.pad { padding: 1rem; }
h1 { font-size: 1.3rem; margin: 0; } h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.muted { color: var(--muted); } .small, small { font-size: .85rem; } .bad { color: var(--bad); }

.house-head { background: var(--green); color: #fff; padding: 1rem; display: flex; gap: .75rem; align-items: center; justify-content: space-between;
  border-bottom: 6px solid var(--role, var(--green)); }
.house-head .sub { opacity: .9; font-size: .9rem; }
.intact { font-size: .85rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(255,255,255,.15); white-space: nowrap; }
.intact.bad { background: var(--bad); }
.practice { background: repeating-linear-gradient(45deg, #fef3c7, #fef3c7 10px, #fde68a 10px, #fde68a 20px);
  text-align: center; font-weight: 700; padding: .5rem; letter-spacing: .05em; }
.offline { background: #fff7ed; border-inline-start: 5px solid var(--warn); padding: .75rem 1rem; }

.card { background: var(--card); margin: .75rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--line); }
.count { background: var(--line); border-radius: 999px; padding: 0 .55rem; font-size: .85rem; }
.capture { display: grid; gap: .75rem; }
.big-btn { display: block; width: 100%; text-align: center; font-size: 1.15rem; font-weight: 700; padding: 1rem;
  border-radius: 14px; border: 0; background: var(--green); color: #fff; cursor: pointer; font-family: inherit; }
.stage-pick { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
select { font: inherit; padding: .6rem; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
button.link { background: none; border: 0; color: var(--green); text-decoration: underline; font: inherit; padding: 0; cursor: pointer; }

.q-list, .req-list, .timeline, .ladder { list-style: none; margin: 0; padding: 0; }
.q-item { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; border-top: 1px solid var(--line); }
.q-item img, .q-ph { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--line); flex: none; }
.q-refused b { color: var(--bad); } .q-done b { color: var(--ok); } .q-retry b, .q-waiting b { color: var(--warn); }
.chip { display: inline-block; font-size: .75rem; padding: 0 .45rem; border-radius: 999px; background: var(--line); }
.chip.warn { background: #fef3c7; color: #92400e; }

.req-list li { padding: .6rem 0; border-top: 1px solid var(--line); }
.req-list .act { color: var(--bad); font-weight: 700; }

.ladder li { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; }
.ladder .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.ladder .st-done .dot { background: var(--ok); border-color: var(--ok); }
.ladder .st-now .dot { background: var(--yellow); border-color: var(--yellow); }
.ladder .st-now { font-weight: 700; } .ladder small { color: var(--muted); margin-inline-start: auto; }

.timeline li { padding: .55rem 0 .55rem .75rem; border-inline-start: 4px solid var(--role-c, var(--line)); margin-bottom: .35rem; }
.timeline .when { font-size: .8rem; color: var(--muted); }
.role-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: 0 .45rem; border-radius: 6px; background: var(--role-c, var(--system)); color: #fff; }
.house-head .role-badge { background: rgba(255,255,255,.2); }
.role-owner { --role-c: var(--owner); } .role-representative { --role-c: var(--representative); }
.role-contractor { --role-c: var(--contractor); } .role-munshi { --role-c: var(--munshi); }
.role-architect { --role-c: var(--architect); } .role-engineer { --role-c: var(--engineer); }
.role-inspector { --role-c: var(--inspector); } .role-system { --role-c: var(--system); }
.house-head.role-owner, .house-head.role-contractor, .house-head.role-munshi { --role: var(--role-c); }

.chooser { padding: 2rem 1rem; display: grid; gap: 1rem; text-align: center; }
.chooser p { margin: 0; color: var(--muted); }

.auth { display: grid; gap: .9rem; margin-top: 2rem; }
.auth label { display: grid; gap: .35rem; color: var(--muted); font-size: .95rem; }
.auth input { font: inherit; font-size: 1.2rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); }
.auth input.code { letter-spacing: .5em; text-align: center; font-size: 1.5rem; }
.houses { list-style: none; margin: .75rem; padding: 0; display: grid; gap: .6rem; }
.house-row { width: 100%; text-align: start; display: grid; gap: .2rem; padding: 1rem; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card); font: inherit; color: var(--ink); cursor: pointer; }
.house-row small { color: var(--muted); }
button.link.light { color: #fff; }