/* ==========================================================================
   Date-Palm Custodian — R0 internal-test web build
   Derived from App_Scope/screens/assets/screens.css design system.
   Arabic-first (RTL), English secondary. Mobile-first, max 430px column.
   ========================================================================== */

:root{
  --ground:#F7F8F5;
  --surface:#FFFFFF;
  --surface-2:#EFF1EC;
  --surface-3:#E4E8DF;
  --ink:#181C18;
  --ink-2:#3D443D;
  --muted:#6B7269;
  --rule:#D8DCD4;
  --rule-2:#C3C9BE;

  --accent:#2F5D50;
  --accent-2:#3F7A69;
  --accent-soft:#E4EDE8;
  --on-accent:#FFFFFF;

  --gap:#B0722C;
  --gap-soft:#F6ECDE;
  --refuse:#94382B;
  --refuse-soft:#F7E7E3;
  --ok:#3F6B3A;
  --ok-soft:#E6EFE3;
  --info:#2E5A73;
  --info-soft:#E3EDF2;

  --radius:14px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(24,28,24,.06), 0 10px 30px -14px rgba(24,28,24,.20);
  --shadow-sm:0 1px 2px rgba(24,28,24,.07);

  --ar:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Segoe UI",Tahoma,sans-serif;
  --en:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{background:var(--surface-3)}
html[dir="ltr"] body{font-family:var(--en)}

body{
  margin:0 auto; max-width:430px; min-height:100dvh;
  background:var(--ground);
  font-family:var(--ar); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}

#app{flex:1; display:flex; flex-direction:column}

/* ---------- nav bar ---------- */
.navbar{
  flex:none; display:flex; align-items:center; gap:12px;
  padding:16px 18px 14px; border-bottom:1px solid var(--rule);
  background:var(--ground); position:sticky; top:0; z-index:5;
}
.navbar h1{margin:0; font-size:1.16rem; font-weight:650; letter-spacing:-.01em; line-height:1.25}
.navbar .sub{font-size:.76rem; color:var(--muted); font-weight:400; display:block; margin-top:2px}
.navbar .spacer{flex:1}
.back{
  width:32px; height:32px; flex:none; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--rule);
  display:grid; place-items:center; color:var(--ink-2); font-size:1rem;
  cursor:pointer; text-decoration:none;
}
.langbtn{
  flex:none; border:1px solid var(--rule); background:var(--surface);
  border-radius:999px; padding:5px 12px; font-size:.72rem; font-weight:600;
  color:var(--ink-2); cursor:pointer; font-family:var(--mono);
}

/* ---------- scroll body ---------- */
.screen{
  flex:1; padding:16px 18px 26px;
  display:flex; flex-direction:column; gap:14px;
}

/* ---------- tab bar ---------- */
.tabbar{
  flex:none; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule); background:var(--surface);
  padding:8px 6px calc(10px + env(safe-area-inset-bottom));
  position:sticky; bottom:0; z-index:5;
  max-width:430px; margin:0 auto; width:100%;
}
.tab{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.63rem;
  color:var(--muted); text-decoration:none; cursor:pointer; background:none; border:none;
  font-family:inherit}
.tab .ico{font-size:1.15rem; line-height:1}
.tab.on{color:var(--accent); font-weight:600}

/* ---------- cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); padding:15px 16px;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:var(--shadow-sm);
}
.card p{margin:0; font-size:.86rem; line-height:1.65; color:var(--ink-2)}
.card-h{display:flex; align-items:flex-start; gap:10px; justify-content:space-between}
.card-t{font-size:1rem; font-weight:650; line-height:1.35; margin:0}

.rail-accent{border-inline-start:4px solid var(--accent)}
.rail-gap{border-inline-start:4px solid var(--gap)}
.rail-ok{border-inline-start:4px solid var(--ok)}
.rail-refuse{border-inline-start:4px solid var(--refuse)}
.rail-info{border-inline-start:4px solid var(--info)}

.eyebrow{
  font-size:.66rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:650; font-family:var(--mono);
}
.sec-label{margin-top:6px}
.tiny{font-size:.74rem; color:var(--muted); line-height:1.6}
.tiny b{color:var(--ink-2)}
.divider{height:1px; background:var(--rule); margin:2px 0}

/* ---------- chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{
  font-size:.7rem; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent); white-space:nowrap;
}
.chip.plain{background:var(--surface-2); color:var(--ink-2); font-weight:500}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.gap{background:var(--gap-soft); color:var(--gap)}
.chip.refuse{background:var(--refuse-soft); color:var(--refuse)}
.chip.info{background:var(--info-soft); color:var(--info)}

/* ---------- meters / windows ---------- */
.meter-row{display:flex; align-items:baseline; justify-content:space-between}
.meter-row .n{font-size:.8rem; font-weight:650; color:var(--ink-2)}
.bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.bar i{display:block; height:100%; border-radius:99px; background:var(--accent-2)}
.bar.gap i{background:var(--gap)}
.bar.ok i{background:var(--ok)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:var(--on-accent);
  border:none; border-radius:11px; padding:11px 18px;
  font-size:.88rem; font-weight:650; cursor:pointer; text-decoration:none;
  font-family:inherit; line-height:1.2;
}
.btn.sec{background:var(--accent-soft); color:var(--accent)}
.btn.ghost{background:transparent; color:var(--ink-2); border:1px solid var(--rule-2)}
.btn.danger{background:var(--refuse-soft); color:var(--refuse)}
.btn.wide{width:100%}
.btn:disabled{opacity:.45; cursor:default}
.btn-row{display:flex; gap:10px}
.btn-row .btn{flex:1}

/* ---------- rows ---------- */
.rows{display:flex; flex-direction:column; gap:2px}
.row{
  display:flex; align-items:center; gap:12px; padding:9px 0;
  border-bottom:1px solid var(--surface-2); font-size:.85rem;
}
.row:last-child{border-bottom:none}
.row .grow{flex:1; line-height:1.4}
.row .sub{display:block; font-size:.72rem; color:var(--muted); margin-top:1px; line-height:1.5}
.row .val{font-size:.78rem; font-weight:650; color:var(--ink-2); white-space:nowrap}
.avatar{
  width:34px; height:34px; flex:none; border-radius:10px;
  background:var(--surface-2); display:grid; place-items:center;
  font-size:1rem; color:var(--ink-2);
}

/* ---------- notes ---------- */
.note{
  border-radius:var(--radius-sm); padding:10px 12px;
  font-size:.76rem; line-height:1.6; display:flex; flex-direction:column; gap:4px;
  background:var(--surface-2); color:var(--ink-2);
}
.note .ttl{font-weight:700}
.note.refuse{background:var(--refuse-soft); color:var(--refuse)}
.note.info{background:var(--info-soft); color:var(--info)}
.note.gap{background:var(--gap-soft); color:#7A4E1B}
.note.ok{background:var(--ok-soft); color:var(--ok)}

/* ---------- photo frame ---------- */
.photo{
  border:1.5px dashed var(--rule-2); border-radius:var(--radius-sm);
  padding:18px 14px; text-align:center; color:var(--muted);
  font-size:.78rem; line-height:1.7; background:var(--surface-2);
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
}
.photo .ico{font-size:1.5rem}
.photo img{max-width:100%; border-radius:8px}
.photo.done{border-style:solid; border-color:var(--ok); background:var(--ok-soft)}

/* ---------- forms ---------- */
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:.8rem; font-weight:650; color:var(--ink-2)}
.field .hint{font-size:.72rem; color:var(--muted); line-height:1.5}
input[type=text], input[type=number], select, textarea{
  width:100%; border:1px solid var(--rule-2); border-radius:10px;
  background:var(--surface); padding:11px 12px; font-size:.9rem;
  font-family:inherit; color:var(--ink);
}
input:focus, select:focus, textarea:focus{outline:2px solid var(--accent-2); border-color:var(--accent-2)}

.choice-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.choice{
  border:1.5px solid var(--rule-2); border-radius:11px; background:var(--surface);
  padding:12px 10px; text-align:center; font-size:.82rem; font-weight:600;
  color:var(--ink-2); cursor:pointer; font-family:inherit; line-height:1.4;
}
.choice.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent)}
.choice .sub{display:block; font-size:.68rem; font-weight:400; color:var(--muted); margin-top:2px}

/* ---------- misc ---------- */
.en{font-family:var(--en)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.stack{display:flex; flex-direction:column; gap:14px}
.badge-row{display:flex; gap:8px; align-items:center}

.hero{
  padding:44px 26px 10px; text-align:center; display:flex; flex-direction:column;
  gap:10px; align-items:center;
}
.hero .mark{font-size:2.6rem}
.hero h1{margin:0; font-size:1.5rem; font-weight:700; line-height:1.35}
.hero p{margin:0; font-size:.86rem; color:var(--ink-2); line-height:1.7}

.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stat{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius-sm);
  padding:12px; display:flex; flex-direction:column; gap:2px;
}
.stat .n{font-size:1.3rem; font-weight:700; color:var(--ink)}
.stat .l{font-size:.7rem; color:var(--muted); line-height:1.4}

.toast{
  position:fixed; bottom:88px; left:50%; transform:translateX(-50%);
  background:var(--ink); color:#fff; font-size:.8rem; padding:10px 18px;
  border-radius:999px; z-index:20; box-shadow:var(--shadow);
  animation:toast-in .2s ease; max-width:86%; text-align:center;
}
@keyframes toast-in{from{opacity:0; transform:translate(-50%,8px)}to{opacity:1; transform:translate(-50%,0)}}

.footer-note{
  padding:6px 18px 18px; font-size:.66rem; color:var(--muted);
  text-align:center; line-height:1.6; font-family:var(--mono);
}