/* Hatid Express app chrome (landing, editor, login). Matches the Ating Tagpuan portal: forest, cream, gold. */
:root{accent-color:#2F3E28;color-scheme:light;--gold-deep:#A8853F;--forest:#2F3E28;--forest-dark:#1F2C1A;--cream:#F9F6E8;--cream-warm:#FAF7EE;--gold:#C5A059;--gold-pale:#F7E7CE;--gray-200:#E5E1D6;--gray-500:#8A8578;--gray-700:#555045;--err:#B3262B;--good:#2E7D4F}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--forest);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
section{padding:36px 0}
h1{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,6vw,46px);line-height:1.1;margin:10px 0 0;letter-spacing:-.01em}
h1 em{font-style:italic;color:var(--gold)}
h2{font-family:'Playfair Display',serif;font-weight:500;font-size:24px;margin:0}
.lead{font-size:17px;color:var(--gray-700);margin-top:14px;max-width:620px}
.lead b{color:var(--forest)}.was{text-decoration:line-through;color:var(--gray-500)}
.eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;color:var(--gold);margin:0}
.center{text-align:center}
.top{padding:16px 0;border-bottom:1px solid var(--gray-200);background:var(--cream-warm)}
.top .wrap{display:flex;align-items:center;gap:8px}
.wordmark{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;color:var(--gold);text-decoration:none;white-space:nowrap}
.pill{font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;background:var(--forest);color:var(--cream);padding:5px 9px;border-radius:999px;white-space:nowrap}
.top .link{margin-left:auto;font-size:12px;font-weight:600;text-decoration:none;border:1.5px solid var(--gray-200);border-radius:999px;padding:6px 12px;white-space:nowrap;background:#fff}
.link{color:var(--forest);text-decoration:underline;text-underline-offset:3px;font-weight:600;background:none;border:0;cursor:pointer;font:inherit;padding:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--forest);color:var(--cream);font-weight:700;font-size:15px;border:0;cursor:pointer;text-decoration:none;transition:transform .15s,background .15s}
@media(hover:hover){.btn:hover{background:var(--forest-dark)}.btn-gold:hover{background:var(--gold-deep);color:#fff}.btn-ghost:hover{background:var(--cream-warm)}}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.55;cursor:not-allowed}
html{overscroll-behavior-y:none}a{color:var(--forest)}a:visited{color:var(--forest)}
input,select,textarea,button{font-family:inherit;-webkit-tap-highlight-color:transparent}
input[type=date],input[type=time]{color:var(--forest);-webkit-text-fill-color:var(--forest)}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left;color:var(--forest)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.btn-gold{background:var(--gold);color:var(--forest-dark)}
.btn-ghost{background:#fff;color:var(--forest);border:1.5px solid var(--gray-200)}
.btn-sm{min-height:40px;padding:0 16px;font-size:13px}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:16px;padding:18px}
.card b{display:block;font-family:'Playfair Display',serif;font-size:19px;margin-bottom:6px}
.card p{margin:0;color:var(--gray-700);font-size:15px}
.field{display:block;margin-top:14px}
.field>span{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-500);margin-bottom:6px}
.inp{width:100%;min-height:48px;padding:11px 14px;border:1.5px solid var(--gray-200);border-radius:12px;background:#fff;font:inherit;color:var(--forest)}
.inp:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(197,160,89,.18)}
textarea.inp{min-height:100px;resize:vertical}
.err{display:none;color:var(--err);font-size:14px;margin-top:10px}.err.show{display:block}
.ok{color:var(--good)}
.foot{padding:30px 0 50px;font-size:13px;color:var(--gray-500);text-align:center}
.foot .wordmark{font-size:16px}
.modal{position:fixed;inset:0;z-index:60;background:rgba(31,44,26,.7);display:none;align-items:flex-end;justify-content:center;padding:0}
.modal.open{display:flex}
@media(min-width:640px){.modal{align-items:center;padding:20px}}
.modal-box{background:#fff;width:100%;max-width:520px;border-radius:20px 20px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));max-height:92vh;overflow:auto}
@media(min-width:640px){.modal-box{border-radius:20px;padding:28px}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}