/* AC Call Tracker — Flatpay brand */
:root{
  --ink:#000; --paper:#fff; --grey:#f1f2f1; --line:#e4e6e4;
  --muted:#6e6e6e; --faint:#9a9a9a;
  --mint:#92f8c2; --mint-soft:#dbf9eb;
  --peach:#f8b185; --pink:#f8b5d3; --cyan:#9beef8; --peri:#afbdfc;
  --good:#1d7a4a; --warn:#c2382f;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:Calibri,"Segoe UI",-apple-system,system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
h1,h2,h3{font-family:"Arial Black","Arial Bold",Arial,sans-serif;letter-spacing:-.01em;margin:0}
button,input{font-family:inherit;font-size:16px}

.screen{max-width:760px;margin:0 auto;padding:16px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center}

/* ---------------------------------------------------------- sign in */
#signin{background:var(--ink);color:var(--paper);max-width:none}
.signin-card{width:100%;max-width:420px;padding:24px}
/* Flatpay logo — the SVG uses currentColor, so `color` drives it */
.brand{display:flex;align-items:center;margin-bottom:34px;color:var(--paper)}
.brand .logo{width:132px;height:auto;display:block}
.brand.sm{margin-bottom:0;color:var(--ink)}
.brand.sm .logo{width:104px}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:4px 0 14px}
#signin h1{font-size:34px;line-height:1.05;margin-bottom:10px}
#signin .sub{color:#bebebe;font-size:15px;line-height:1.45;margin:0 0 26px}
#signin label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mint);margin-bottom:8px}
#signin input{width:100%;padding:15px 16px;border-radius:12px;border:1px solid #333;
  background:#151515;color:var(--paper);text-transform:uppercase;letter-spacing:.05em}
#signin input:focus{outline:2px solid var(--mint);border-color:transparent}
#signin .primary{background:var(--mint);color:var(--ink);width:100%;margin-top:14px}

/* ---------------------------------------------------------- chrome */
.bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:6px 0 14px}
.bar h2{font-size:26px;margin-top:6px}
.chip{display:inline-block;background:var(--mint);color:var(--ink);
  font-family:"Arial Black",Arial,sans-serif;font-size:10px;letter-spacing:.06em;
  padding:5px 10px;border-radius:20px}
.chip.admin{background:var(--peri)}

.tabs{display:flex;gap:6px;background:var(--grey);padding:4px;border-radius:12px;margin-bottom:16px}
.tab{flex:1;border:0;background:transparent;padding:10px 8px;border-radius:9px;
  font-weight:700;color:var(--muted);cursor:pointer}
.tab.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* ---------------------------------------------------------- buttons */
button{cursor:pointer}
.primary{background:var(--ink);color:var(--paper);border:0;border-radius:12px;
  padding:14px 18px;font-weight:700}
.primary:active{transform:translateY(1px)}
.ghost{background:transparent;border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;font-weight:600;color:var(--muted)}
.wide{width:100%;margin-top:16px;padding:13px}

/* ---------------------------------------------------------- log */
.datebar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--grey);border-radius:12px;padding:10px 14px;margin-bottom:12px}
.datebar label{font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.datebar input{border:0;background:transparent;font-weight:700}
.hint{font-size:13.5px;color:var(--muted);margin:0 0 12px}

.sm-list{display:grid;gap:10px}
.sm-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;border:0;border-radius:var(--r);
  background:var(--mint-soft);padding:17px 18px;font-size:18px;font-weight:700}
.sm-btn:nth-child(even){background:var(--grey)}
.sm-btn .tag{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.sm-btn:active{transform:scale(.995)}

.recent{margin-top:26px}
.recent h3{font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}
.log-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px}
.log-row b{font-size:15px}
.log-row .pill{font-family:"Arial Black",Arial,sans-serif;font-size:12px;
  padding:4px 9px;border-radius:20px;background:var(--mint);color:var(--ink)}
.log-row .pill.zero{background:#fbeaea;color:var(--warn)}
.log-row .pill.one{background:#fdebda;color:#a35a1c}
.log-row .del{border:0;background:transparent;color:var(--faint);font-size:20px;
  line-height:1;padding:2px 6px}
.empty{color:var(--muted);font-size:14px;background:var(--grey);
  padding:14px;border-radius:12px}

/* ---------------------------------------------------------- stats */
.weeknav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.weeknav span{font-weight:700}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.kpi{background:var(--grey);border-radius:12px;padding:12px 10px;text-align:center}
.kpi .n{font-family:"Arial Black",Arial,sans-serif;font-size:22px;line-height:1.1}
.kpi .l{font-size:10.5px;color:var(--muted);margin-top:4px;line-height:1.25}
.kpi.good .n{color:var(--good)} .kpi.warn .n{color:var(--warn)}

.stat-list{display:grid;gap:10px}
.stat{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.stat .name{font-family:"Arial Black",Arial,sans-serif;font-size:16px}
.stat .avg{font-family:"Arial Black",Arial,sans-serif;font-size:20px}
.stat .sub{font-size:13px;color:var(--muted);margin-top:3px}
.bar-track{height:8px;border-radius:6px;background:var(--grey);margin-top:10px;overflow:hidden}
.bar-fill{height:100%;background:var(--mint);border-radius:6px}
.bar-fill.low{background:var(--peach)} .bar-fill.bad{background:#f6a9a2}

/* ---------------------------------------------------------- team */
.row-form{display:flex;gap:8px;margin:12px 0}
.row-form input{flex:1;padding:13px 14px;border-radius:12px;border:1px solid var(--line)}
.roster{display:grid;gap:8px}
.roster .r{display:flex;align-items:center;justify-content:space-between;
  padding:13px 15px;background:var(--grey);border-radius:12px;font-weight:700}
.roster .r button{border:0;background:transparent;color:var(--faint);font-size:13px}
.stack{display:grid;gap:8px;margin-top:12px}
.stack input{padding:13px 14px;border-radius:12px;border:1px solid var(--line)}
.newteam{margin-top:22px;border-top:1px solid var(--line);padding-top:14px}
.newteam summary{font-weight:700;color:var(--muted);cursor:pointer}

/* ---------------------------------------------------------- meeting cards */
.sm-card{border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;background:var(--paper)}
.sm-card.live{background:var(--mint-soft);border-color:transparent}
.sm-card .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sm-card .nm{font-family:"Arial Black",Arial,sans-serif;font-size:17px}
.sm-card .mt{font-size:12.5px;color:var(--muted);white-space:nowrap}
.sm-card .none{margin-top:10px}
.counter{display:flex;align-items:center;gap:10px;margin-top:12px}
.counter .step{width:54px;height:54px;flex:0 0 54px;border:0;border-radius:14px;
  background:var(--paper);border:1px solid var(--line);
  font-family:"Arial Black",Arial,sans-serif;font-size:24px;line-height:1}
.counter .step.plus{background:var(--ink);color:var(--paper);border-color:var(--ink);flex-grow:1}
.counter .step:disabled{opacity:.35}
.counter .readout{flex:1;text-align:center}
.counter .readout .n{font-family:"Arial Black",Arial,sans-serif;font-size:30px;line-height:1}
.counter .readout .l{font-size:11px;color:var(--muted);margin-top:2px}
.sm-card .newmtg{margin-top:10px;width:100%;padding:11px;font-size:14px}
.cardfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.cardfoot .mtno{font-size:12.5px;font-weight:700;color:var(--muted)}
.flag{display:inline-block;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;
  background:#fbeaea;color:var(--warn)}
.flag.ok{background:var(--mint);color:var(--ink)}
.daytotals{display:grid;gap:8px}
.daytotals .row{display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border:1px solid var(--line);border-radius:11px;font-size:14px}
.daytotals .row b{font-family:"Arial Black",Arial,sans-serif}

/* ---------------------------------------------------------- sheet */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;
  align-items:flex-end;justify-content:center;z-index:50}
.sheet-card{background:var(--paper);width:100%;max-width:520px;
  border-radius:20px 20px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom))}
.sheet-eyebrow{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px}
.sheet-card h3{font-size:24px;margin-bottom:16px}
.calls{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.call{border:0;border-radius:var(--r);padding:20px 0;font-family:"Arial Black",Arial,sans-serif;
  font-size:26px;background:var(--grey)}
.call[data-v="0"]{background:#fbeaea;color:var(--warn)}
.call[data-v="1"]{background:#fdebda;color:#a35a1c}
.call[data-v="2"],.call[data-v="3"],.call[data-v="4"],.call[data-v="5"]{
  background:var(--mint-soft);color:var(--good)}
.call:active{transform:scale(.97)}

/* ---------------------------------------------------------- misc */
.err{color:var(--warn);font-size:13.5px;margin:10px 0 0}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;z-index:60;
  background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:30px;
  font-weight:700;font-size:14px;box-shadow:0 6px 20px rgba(0,0,0,.28)}

@media(min-width:620px){
  .screen{padding:26px}
  .bar h2{font-size:30px}
  .calls{grid-template-columns:repeat(6,1fr)}
}