@import url('fonts.css');
@import url('tokens.css');

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color:var(--brand-black);
  background:var(--brand-light);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-heading); font-weight:600; margin:0 0 .5em; color:var(--brand-dark); }
p{ margin:0 0 1em; }
a{ color:var(--brand-primary); }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* App chrome is not selectable (deterrent + polish), but form fields and
   preview text the user typed must remain selectable/copyable. */
body{ user-select:none; }
input, textarea, select, [contenteditable="true"], .selectable{
  user-select:text;
}

/* ---------------------------------------------------------------------
   Desktop-only gate — layer 2 (CSS). Layer 1 is the server-side UA check
   in includes/desktop_gate.php, which stops real phones before any of this
   ships. This is the fallback for edge cases (tablets, desktop-mode, resized
   windows) and needs no JS to take effect.
--------------------------------------------------------------------- */
#device-block{ display:none; }
@media (max-width: 1023px){
  #app-shell, #auth-shell{ display:none !important; }
  #device-block{
    display:flex; min-height:100vh; align-items:center; justify-content:center;
    background:linear-gradient(160deg,var(--brand-dark),var(--brand-primary));
    color:#fff; text-align:center; padding:28px;
  }
}

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Scrollbar polish (non-essential, cosmetic) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }