/* =====================================================================
   core.css — shared look for every page (login, home, each tracker).
   Tracker pages add their own styles on top of this file.
   ===================================================================== */
:root{
  box-sizing:border-box;
  --bg:#EDF0F4; --surface:#FFFFFF; --surface-alt:#F5F7FA; --surface-2:#EEF2F7; --line:#E1E5EC;
  --ink:#1B2433; --ink-2:#3A4556; --muted:#667085;
  --primary:#243F6A; --primary-2:#1A3052; --primary-soft:#E7EDF6; --primary-ink:#24406B;
  --on-primary:#FFFFFF; --focus:#4C7BD1; --brand:#3F51B5;
  --date:#2F5DA8; --ok:#1E7B4F; --ok-soft:#E4F3EB; --warn:#9A6200; --warn-soft:#FBF1DC;
  --danger:#B42318; --danger-soft:#FBE9E7; --field:#FFFFFF;
  --tile-l:90%; --tile-ink:30%;
  --shadow:0 1px 2px rgba(16,24,40,.06);
  --app-width:500px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1017; --surface:#161D28; --surface-alt:#1A2230; --surface-2:#212B3A; --line:#283243;
    --ink:#E6EAF0; --ink-2:#C4CBD6; --muted:#8E99AB;
    --primary:#1C2E4D; --primary-2:#243C63; --primary-soft:#22324D; --primary-ink:#A9C1EA;
    --focus:#7FA3E6; --date:#8FB0EC; --ok:#5CC28D; --ok-soft:#173226; --warn:#E3B45C; --warn-soft:#352A14;
    --danger:#F0877C; --danger-soft:#3A1D1A; --field:#10161F;
    --tile-l:26%; --tile-ink:80%;
    --shadow:none;
  }
}
*,*::before,*::after{box-sizing:inherit}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Figtree","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
a{color:var(--date)}
.hidden{display:none!important}

/* page shell */
.app{max-width:var(--app-width);margin:0 auto;height:100%;display:flex;flex-direction:column;background:var(--surface);position:relative;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.view{display:none;flex:1;min-height:0;flex-direction:column}
.view.active{display:flex}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--surface)}

/* header */
.hdr{display:flex;align-items:center;gap:0;padding:calc(8px + env(safe-area-inset-top,0px)) 6px 8px 16px;background:var(--primary);color:var(--on-primary);min-height:58px;flex-shrink:0}
.hdr h1{flex:1;margin:0;font-size:1.2rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr.has-back{padding-left:6px}
.icon-btn{background:none;border:0;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;position:relative;color:inherit;text-decoration:none}
.hdr .icon-btn:hover{background:rgba(255,255,255,.12)}
.icon-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .badge{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#F5B544;display:none}
.icon-btn.on .badge{display:block}
.avatar{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.55)}
.hdr-logo{width:30px;height:30px;background:#fff;border-radius:8px;padding:3px;margin-right:10px;flex-shrink:0}

/* fields + buttons */
.in{width:100%;background:var(--field);border:1px solid var(--line);padding:10px 12px;font-size:1rem;border-radius:8px;outline:none;min-height:44px}
.in:focus{border-color:var(--focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 22%,transparent)}
.in.err{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
textarea.in{min-height:110px;resize:vertical;line-height:1.5}
input[type=date].in{color-scheme:light dark}
.req::after{content:" *";color:var(--danger)}
.errmsg{color:var(--danger);font-size:.84rem;margin-top:6px;display:none}
.errmsg.show{display:block}
.btn{background:var(--primary);color:var(--on-primary);border:0;padding:10px 18px;font-size:.98rem;font-weight:600;border-radius:8px;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.btn:hover{background:var(--primary-2)}
.btn.light{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow)}
.btn.light:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.danger{background:var(--danger);color:#fff}
.linkbtn{background:none;border:0;color:var(--date);font-weight:600;font-size:.9rem;padding:4px 2px}

/* centred screens (login, loading) */
.center{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px 24px;text-align:center;gap:16px}
.center p{color:var(--muted);line-height:1.55;margin:0;max-width:400px}
.brand{font-size:1.8rem;font-weight:700;margin:0}
.center .brand{color:var(--ink)}
.logo{width:84px;height:84px;margin-bottom:-4px}
@media (prefers-color-scheme:dark){.logo{background:#fff;border-radius:22px;padding:10px}}
.warnbox{background:var(--danger-soft);border-left:4px solid var(--danger);padding:10px 12px;margin:10px 0;font-size:.9rem;line-height:1.5;text-align:left}
.steps{list-style:none;padding:0;margin:0;text-align:left;min-width:250px}
.steps li{padding:5px 0;color:var(--muted)}
.steps li.done{color:var(--ink)}
.steps li.done::before{content:"✓ ";color:var(--ok)}
.steps li.run::before{content:"• ";color:var(--date)}
.spinner{width:36px;height:36px;border:3px solid var(--line);border-top-color:var(--primary-ink);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}
.empty{padding:56px 28px;text-align:center;color:var(--muted);line-height:1.6}
.empty button{margin-top:14px}

/* overlays (injected by core.js) */
.overlay{position:fixed;inset:0;background:rgba(15,20,28,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.overlay.show{display:flex}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:12px;width:100%;max-width:380px;padding:20px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal h2{margin:0 0 8px;font-size:1.1rem;word-break:break-word}
.modal p{margin:0 0 16px;color:var(--ink-2);line-height:1.5}
.modal .in{margin-bottom:16px}
.modal .acts{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.modal .acts .btn{padding:9px 14px;font-size:.92rem}
.busy-box{display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--surface);padding:22px 26px;border-radius:12px;max-width:300px;text-align:center;word-break:break-word}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#1B2433;color:#fff;padding:11px 16px;border-radius:8px;border-left:4px solid #5CC28D;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90%}
.toast.show{opacity:1}
.toast.err{border-left-color:#F0877C}

/* account menu (built by Core.mountUserMenu) */
.menu{position:absolute;right:8px;top:calc(54px + env(safe-area-inset-top,0px));background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(16,24,40,.16);z-index:50;min-width:240px;display:none;overflow:hidden}
.menu.open{display:block}
.menu .who{padding:11px 16px;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--muted);word-break:break-all}
.menu .who b{display:block;color:var(--ink);font-size:.95rem}
.menu button,.menu a{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 16px;color:var(--ink);text-decoration:none;font-size:.93rem}
.menu button:hover,.menu a:hover{background:var(--surface-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:0}