/* Jubail Commons — shared app styles (account, home, events, admin pages).
   Tokens only (assets/tokens.css) — never raw colors. Logical properties only
   (margin-inline, padding-inline, inset-inline) so RTL flows from dir=. */
*{box-sizing:border-box}
/* the hidden attribute must win over display rules below (label{display:flex} etc.) */
[hidden]{display:none !important}
body{margin:0; background:var(--jc-bg); color:var(--jc-ink);
  font:15px/1.6 var(--jc-font); -webkit-font-smoothing:antialiased; min-height:100vh}
main{max-width:480px; margin:0 auto; padding:24px 18px 40px}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px}
.topbar a.home{color:var(--jc-ink); text-decoration:none; font-weight:800; font-size:22px; letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px; line-height:1.2}
.topbar a.home svg{flex:0 0 auto}
.lang{border:1px solid var(--jc-line); background:var(--jc-surface); color:var(--jc-ink);
  border-radius:var(--jc-radius-pill); padding:6px 14px; font-size:13px; font-weight:700; cursor:pointer}
h1{font-size:22px; font-weight:800; margin:0 0 6px}
.sub{color:var(--jc-muted); margin:0 0 18px; font-size:14px}
.panel{background:var(--jc-surface); border:1px solid var(--jc-line); border-radius:var(--jc-radius);
  padding:18px 16px; display:flex; flex-direction:column; gap:12px}
label{display:flex; flex-direction:column; gap:5px; font-size:13px; font-weight:700; color:var(--jc-muted)}
input[type=email], input[type=password], input[type=text]{
  font:inherit; font-size:16px; /* ≥16px: iOS doesn't zoom on focus */
  color:var(--jc-ink); background:var(--jc-surface-2); border:1px solid var(--jc-line);
  border-radius:10px; padding:11px 12px; width:100%}
input:focus-visible, button:focus-visible, a:focus-visible{outline:2px solid var(--jc-accent); outline-offset:2px}
.btn{font:inherit; font-weight:800; font-size:15px; border:0; border-radius:10px; padding:12px 16px;
  background:var(--jc-accent); color:var(--jc-accent-ink); cursor:pointer; text-align:center; text-decoration:none}
.btn[disabled]{opacity:.6; cursor:progress}
.btn.ghost{background:transparent; color:var(--jc-ink); border:1px solid var(--jc-line)}
.links{display:flex; flex-direction:column; gap:8px; margin-top:16px; font-size:14px}
.links button{font:inherit; background:none; border:0; padding:0; color:var(--jc-accent); cursor:pointer;
  text-align:start; text-decoration:underline}
.help{color:var(--jc-faint); font-size:12.5px; margin:0}
.msg{display:none; border-radius:10px; padding:9px 12px; font-size:13.5px; margin:0}
.msg.err{display:block; background:var(--jc-surface-2); border:1px solid var(--jc-danger); color:var(--jc-danger)}
.msg.ok{display:block; background:var(--jc-surface-2); border:1px solid var(--jc-good); color:var(--jc-good)}
.who{font-size:14px; color:var(--jc-muted); margin:0; overflow-wrap:anywhere}
.who b{color:var(--jc-ink)}