/* Phone-app chrome. Kept in a file rather than an inline <style> so the
   Content-Security-Policy in server/Caddyfile.snippet can stay strict:
   style-src 'self' blocks inline style blocks, which would leave the page
   completely unstyled on the phone. */

  :root {
    --bg: #ffffff;
    --bg-sunk: #f2f2f4;
    --line: #e4e4e8;
    --text: #1c1c1e;
    --muted: #86868c;
    --accent: #ffb020;
    --danger: #e5484d;
    --ok: #30a46c;
    --shadow: 0 12px 32px rgba(0, 0, 0, .2);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #17171a;
      --bg-sunk: #232327;
      --line: #313137;
      --text: #f2f2f4;
      --muted: #8f8f98;
      --shadow: 0 12px 32px rgba(0, 0, 0, .6);
    }
  }

  * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; min-height: 100%; }
  body {
    background: var(--bg);
    color: var(--text);
    font: 16px/1.45 -apple-system, "Segoe UI", system-ui, sans-serif;
    -webkit-user-select: none; user-select: none;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .shell { max-width: 620px; margin: 0 auto; }

  header {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  header h1 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
  .dot-sync { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
  .dot-sync[data-status="ok"] { background: var(--ok); }
  .dot-sync[data-status="unauthorized"], .dot-sync[data-status="error"] { background: var(--danger); }
  .chrome-btn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 0; border-radius: 9px;
    background: transparent; color: var(--muted);
    font-size: 17px; cursor: pointer;
  }
  .chrome-btn:active { background: var(--bg-sunk); }

  main { padding-top: 12px; }

  /* login ------------------------------------------------------------------- */
  .login { padding: 32px 20px; max-width: 420px; margin: 0 auto; }
  .login h2 { font-size: 20px; margin: 0 0 6px; }
  .login p { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
  .login label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 5px; }
  .login input {
    width: 100%;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--bg-sunk); color: var(--text);
    font: inherit; padding: 12px; outline: none;
    -webkit-user-select: text; user-select: text;
  }
  .login input:focus { border-color: var(--accent); }
  .login button {
    width: 100%; margin-top: 18px;
    border: 0; border-radius: 10px; padding: 13px;
    background: var(--accent); color: #2a1c00;
    font: inherit; font-weight: 600; cursor: pointer;
  }
  .login .msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
  .login .msg.bad { color: var(--danger); }
  .banner {
    margin: 0 14px 10px; padding: 8px 12px;
    background: var(--bg-sunk); border-radius: 9px;
    color: var(--muted); font-size: 13px;
  }