/* Peow Time Tracker — same visual language as the VIP dashboard:
   dark glass, radial accents, Manrope + Fraunces + JetBrains Mono. */

:root{
  --bg-0:#06070d; --bg-1:#0b0d1a; --bg-2:#11142a;
  --ink:#e8eaf6; --ink-soft:#a3a8c3; --ink-mute:#6b7094;
  --line:rgba(255,255,255,0.08); --line-soft:rgba(255,255,255,0.04);
  --glass:rgba(255,255,255,0.04); --glass-strong:rgba(255,255,255,0.07);
  --accent-1:#7c5cff; --accent-2:#22d3ee; --accent-3:#f0abfc; --accent-4:#fde68a;
  --good:#34d399; --warn:#fbbf24; --bad:#fb7185;
  --radius:18px; --radius-sm:12px;
  --glow-1:rgba(124,92,255,0.28); --glow-2:rgba(34,211,238,0.18); --glow-3:rgba(240,171,252,0.14);
  --grid-line:rgba(255,255,255,0.025); --page-end:#08091a;
  --shadow:0 12px 40px rgba(0,0,0,0.5);
}

/* Light theme keeps the same accents and the same glow, just inverted surfaces,
   so the login screen and the app never look like two different products. */
[data-ptt-theme="light"]{
  --bg-0:#f7f8fc; --bg-1:#ffffff; --bg-2:#eef0f8;
  --ink:#161a2e; --ink-soft:#4b5169; --ink-mute:#7d8399;
  --line:rgba(22,26,46,0.12); --line-soft:rgba(22,26,46,0.06);
  --glass:rgba(255,255,255,0.72); --glass-strong:rgba(255,255,255,0.9);
  --good:#0f9d63; --warn:#b7791f; --bad:#d93a5b;
  --glow-1:rgba(124,92,255,0.16); --glow-2:rgba(34,211,238,0.14); --glow-3:rgba(240,171,252,0.12);
  --grid-line:rgba(22,26,46,0.035); --page-end:#eef1fa;
  --shadow:0 12px 40px rgba(22,26,46,0.12);
}


.ptt-scope{font-family:'Manrope',-apple-system,sans-serif;color:var(--ink);letter-spacing:-0.005em;margin:0}
.ptt-scope *{box-sizing:border-box}
.ptt-scope a{color:inherit}
.ptt-fullscreen{background:var(--bg-0);min-height:100vh;overflow-x:hidden}
.ptt-fullscreen::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(900px 600px at 12% -10%, var(--glow-1), transparent 60%),
    radial-gradient(800px 500px at 95% 10%, var(--glow-2), transparent 60%),
    radial-gradient(700px 600px at 60% 110%, var(--glow-3), transparent 65%),
    linear-gradient(180deg,var(--bg-0) 0%,var(--page-end) 100%);
}
.ptt-fullscreen::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 30%,transparent 75%);
}

.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:30px;height:30px;border-radius:10px;position:relative;
  background:conic-gradient(from 210deg,var(--accent-1),var(--accent-2),var(--accent-3),var(--accent-1));
  box-shadow:0 8px 24px rgba(124,92,255,0.4)}
.brand-mark::after{content:'';position:absolute;inset:6px;border-radius:6px;background:var(--bg-0)}
.brand-mark::before{content:'';position:absolute;inset:11px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-3))}
.brand-name{font-family:'Fraunces',serif;font-weight:600;font-size:23px;letter-spacing:-0.02em}

.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.muted{color:var(--ink-mute);font-size:14px;line-height:1.5}
.app{max-width:1100px;margin:0 auto;padding:18px 16px 80px}

/* ---- top bar: the only thing you need to see ---- */
.topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 0 16px}
.topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.tracker{display:flex;align-items:center;gap:14px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px 10px 20px;margin-bottom:16px;backdrop-filter:blur(20px)}
.tracker.live{border-color:rgba(52,211,153,0.45);box-shadow:0 0 0 1px rgba(52,211,153,0.15)}
.tracker-input{flex:1;min-width:80px;background:none;border:none;outline:none;color:var(--ink);
  font-family:inherit;font-size:18px;padding:12px 0}
.tracker-input::placeholder{color:var(--ink-mute)}
.tracker-task{background:var(--bg-2);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:7px 12px;font-family:inherit;font-size:13px;max-width:220px}
.tracker-clock{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:500;font-variant-numeric:tabular-nums}
.tracker-go{width:62px;height:62px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;
  font-size:24px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(124,92,255,0.35)}
.tracker-go.stop{background:linear-gradient(135deg,var(--bad),#f43f5e)}

.chip{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;
  background:var(--glass);border:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ink)}
.chip.warn{border-color:rgba(251,191,36,0.5);color:var(--warn);cursor:pointer}
.chip small{color:var(--ink-mute);font-weight:500}
.icon-btn{width:46px;height:46px;border-radius:12px;background:var(--glass);
  border:1.5px solid var(--line);color:var(--ink);cursor:pointer;
  font-size:22px;font-weight:800;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:var(--accent-1);color:var(--accent-2)}

.recent{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px}
.recent-chip{flex-shrink:0;background:var(--glass);border:1px solid var(--line);border-radius:999px;
  padding:11px 18px;color:var(--ink-soft);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:44px}
.recent-chip:hover{border-color:var(--accent-1);color:var(--ink)}

.tabs{display:flex;gap:6px;margin-bottom:16px}
.tabs button{background:none;border:none;color:var(--ink-mute);font-family:inherit;font-size:16px;
  font-weight:700;padding:12px 20px;border-radius:12px;cursor:pointer}
.tabs button.on{background:var(--glass-strong);color:var(--ink)}

.card{background:var(--glass);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;backdrop-filter:blur(20px)}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}

.project-head{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.project-name{font-weight:700;font-size:19px}
.project-meta{display:flex;align-items:center;gap:14px}
.arrow{color:var(--ink-mute)}
.tasks{margin-top:14px;border-top:1px solid var(--line-soft);padding-top:12px}
.task{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-soft)}
.task:last-child{border-bottom:none}
.task-go{width:32px;height:32px;border-radius:50%;flex-shrink:0;cursor:pointer;
  background:var(--glass-strong);border:1px solid var(--line);color:var(--ink)}
.task-go:disabled{opacity:.3;cursor:not-allowed}
.task-body{flex:1;min-width:0}
.task-name{font-weight:700;font-size:16px}
.task-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

.entry{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.entry:last-child{border-bottom:none}
.entry-body{flex:1;min-width:0}
.entry-name{font-weight:700;font-size:16px}
.flag{width:22px;text-align:center;flex-shrink:0}
.flag.ok{color:var(--good)} .flag.bad{color:var(--bad)} .flag.mute{color:var(--ink-mute)}

.manual{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.manual input,.manual select{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 12px;color:var(--ink);font-family:inherit;font-size:13.5px}

.bar{display:grid;grid-template-columns:minmax(120px,1fr) 2fr auto;gap:12px;align-items:center;padding:7px 0}
.bar-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
.seg{display:inline-flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{background:none;border:none;color:var(--ink-mute);font-family:inherit;font-size:12.5px;
  font-weight:600;padding:5px 11px;border-radius:999px;cursor:pointer}
.seg button.on{background:var(--glass-strong);color:var(--ink)}

.btn{background:var(--glass);border:1px solid var(--line);color:var(--ink);border-radius:12px;
  padding:13px 22px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;min-height:46px}
.btn-primary{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));border:none;color:#fff}
.link{background:none;border:none;color:var(--accent-2);font-family:inherit;font-size:14px;
  font-weight:700;cursor:pointer;padding:8px 6px}

.overlay{position:fixed;inset:0;background:color-mix(in srgb, var(--bg-0) 78%, transparent);backdrop-filter:blur(6px);
  display:grid;place-items:center;z-index:900;padding:16px}
.dialog{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;max-width:440px;width:100%}
.dialog h3{font-family:'Fraunces',serif;margin:0 0 10px;font-size:20px}
.dialog p{color:var(--ink-soft);line-height:1.6;margin:0 0 20px}
.dialog-actions{display:flex;gap:10px;justify-content:flex-end}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:950;
  background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:11px 20px;
  font-size:14px;font-weight:600;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow)}
.toast.ok{border-color:rgba(52,211,153,0.4)} .toast.bad{border-color:rgba(251,113,133,0.5)}
.nudge{position:fixed;left:16px;right:16px;bottom:80px;z-index:940;max-width:520px;margin:0 auto;
  background:var(--bg-2);border:1px solid rgba(251,191,36,0.4);border-radius:14px;padding:14px 18px;
  font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.alert{background:rgba(251,113,133,0.12);border:1px solid rgba(251,113,133,0.4);
  border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:14px}
.ok{color:var(--good);font-size:14px}

/* ---- login ---- */
.ptt-login-page{display:grid;place-items:center;min-height:100vh}
.login-wrap{width:100%;padding:24px}
.login-card{max-width:400px;margin:0 auto;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--radius);padding:32px;backdrop-filter:blur(20px)}
.login-card h1{font-family:'Fraunces',serif;font-size:26px;margin:20px 0 8px}
.login-card form{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.login-card input{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 16px;color:var(--ink);font-family:inherit;font-size:15px}

@media (max-width:720px){
  .app{padding:12px 12px 90px}
  .topbar{gap:10px}
  .tracker{width:100%;order:2;flex-wrap:wrap;border-radius:var(--radius);padding:10px}
  .tracker-input{flex:1 1 100%}
  .tracker-task{max-width:none;flex:1}
  .topbar-right{order:1;margin-left:auto}
  .bar{grid-template-columns:1fr auto}
  .bar-track{grid-column:1/-1}
  .task-right{flex-direction:column;align-items:flex-end;gap:2px}
}

/* ---- analytics ---- */
.chart{margin:6px 0 18px}
.chart-svg{width:100%;height:150px;display:block;overflow:visible}
.chart-axis{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11px;color:var(--ink-mute);font-family:'JetBrains Mono',monospace}
.money{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:6px}
.money-box{display:flex;flex-direction:column;gap:4px;background:var(--glass);
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--radius-sm);padding:12px 14px}
.money-box strong{font-size:19px}
.money-box.good{border-left-color:var(--good)}
.money-box.warn{border-left-color:var(--warn)}
.money-box.bad{border-left-color:var(--bad)}

/* The login page uses the same shell, so switching to the app is not a jump. */
.login-card .muted{line-height:1.55}
.theme-toggle{position:fixed;top:16px;right:16px;z-index:10}

/* ---- tracker: one line, one obvious button ---- */
.tracker-main{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tracker-input.nudge{box-shadow:0 0 0 2px var(--warn) inset;border-radius:10px;padding-left:10px}
.tracker-task-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;
  font-size:14px;font-weight:700;cursor:pointer;flex-shrink:0}
.tracker-hint{position:absolute;left:0;top:calc(100% + 6px);z-index:20;
  background:var(--warn);color:#1a1400;border-radius:10px;padding:8px 14px;
  font-size:14px;font-weight:700;box-shadow:var(--shadow)}
.tracker-hint::before{content:'';position:absolute;left:18px;top:-5px;width:10px;height:10px;
  background:var(--warn);transform:rotate(45deg)}

.suggest{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  background:var(--bg-1);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);overflow:hidden;max-height:340px;overflow-y:auto}
.suggest-row{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line-soft);
  padding:13px 18px;cursor:pointer;color:var(--ink);font-family:inherit}
.suggest-row:hover:not(:disabled){background:var(--glass-strong)}
.suggest-row:disabled{opacity:.45;cursor:not-allowed}
.suggest-name{font-size:16px;font-weight:700}
.suggest-meta{font-size:13px;color:var(--ink-mute);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tag-mine{background:var(--accent-1);color:#fff;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:800}
.tag-no{color:var(--bad);font-weight:700}

/* ---- my tasks: big rows you can hit with a thumb ---- */
.task-card{display:flex;align-items:center;gap:18px}
.big-go{width:56px;height:56px;border-radius:50%;flex-shrink:0;cursor:pointer;
  font-size:22px;font-weight:900;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));border:none;color:#fff;
  box-shadow:0 4px 16px rgba(124,92,255,0.3)}
.big-go.small{width:46px;height:46px;font-size:17px;background:var(--glass-strong);
  border:1.5px solid var(--line);color:var(--ink);box-shadow:none}
.big-go.on{background:linear-gradient(135deg,var(--bad),#f43f5e)}
.big-go:disabled{opacity:.3;cursor:not-allowed}
.task-card-body{flex:1;min-width:0}
.task-card-name{font-size:18px;font-weight:700;margin-bottom:3px}
.task-card-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.big-num{font-size:20px;font-weight:500}

/* ---- focus mode: the clock, the task, nothing to click by accident ---- */
.app.focus{max-width:none;padding:0}
.focus-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:40px 20px;text-align:center}
.focus-exit{position:fixed;top:20px;right:20px;width:52px;height:52px;border-radius:50%;
  background:var(--glass);border:1.5px solid var(--line);color:var(--ink);
  font-size:24px;font-weight:800;cursor:pointer;line-height:1}
.focus-clock{font-family:'JetBrains Mono',monospace;font-size:clamp(64px,16vw,140px);
  font-weight:500;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-0.03em}
.focus-clock.live{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.focus-what{font-family:'Fraunces',serif;font-size:clamp(22px,4vw,34px);font-weight:600}
.focus-sub{color:var(--ink-mute);font-size:16px}
.focus-btn{margin-top:18px;padding:20px 56px;border-radius:999px;border:none;cursor:pointer;
  font-family:inherit;font-size:20px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
.focus-btn.stop{background:linear-gradient(135deg,var(--bad),#f43f5e)}
.focus-today{width:100%;max-width:560px;margin-top:34px;text-align:left}
.focus-today-head{display:flex;justify-content:space-between;align-items:baseline;
  padding:0 4px 10px;font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:0.12em;color:var(--ink-mute)}
.focus-today-head strong{font-size:17px;color:var(--ink);letter-spacing:normal}
.focus-task{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;
  background:var(--glass);border:1px solid var(--line);border-radius:14px;
  padding:16px 20px;margin-bottom:8px;cursor:pointer;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:600;text-align:left}
.focus-task:hover:not(:disabled){border-color:var(--accent-1)}
.focus-task.on{border-color:var(--good);box-shadow:0 0 0 1px var(--good) inset}
.focus-task:disabled{opacity:.4;cursor:not-allowed}
.focus-task-name{flex:1;min-width:0}

@media (max-width:720px){
  .tracker{flex-wrap:wrap}
  .tracker-main{flex:1 1 100%;order:1}
  .tracker-clock{order:2}
  .tracker-go{order:3;margin-left:auto}
  .task-card{gap:14px}
  .big-go{width:52px;height:52px}
  .tabs{overflow-x:auto}
  .tabs button{white-space:nowrap}
}

/* ---- diagnosis, shown only when the task list is empty ---- */
.diag-list{margin:12px 0;padding-left:20px;line-height:1.65;font-size:15px}
.diag-list li{margin-bottom:8px}
.diag-grid{display:grid;grid-template-columns:1fr auto;gap:8px 18px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line-soft);font-size:14.5px}
.diag-grid span{color:var(--ink-mute)}
.diag-grid strong{font-family:'JetBrains Mono',monospace;text-align:right}

/* ---- stats: the hours are the headline ---- */
.hero-card{background:linear-gradient(135deg,var(--glass-strong),var(--glass));
  border-color:var(--line)}
.hero-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hero-label{font-size:12px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute)}
.hero-num{font-size:clamp(52px,11vw,84px);font-weight:500;line-height:1.05;letter-spacing:-0.03em;margin:6px 0 2px;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-note{font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:18px}
.hero-goal{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hero-goal-bar{flex:1;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.hero-goal-bar div{height:100%;border-radius:99px;transition:width .4s ease;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
.hero-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  padding-top:18px;border-top:1px solid var(--line-soft)}
.hero-cell{display:flex;flex-direction:column;gap:2px}
.hero-cell strong{font-size:24px;font-weight:500}

.bars{display:flex;align-items:flex-end;gap:8px;height:190px;padding-top:20px}
.bars-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  height:100%;gap:6px;min-width:0}
.bars-val{font-size:12px;color:var(--ink-mute)}
.bars-bar{width:100%;max-width:56px;border-radius:8px 8px 4px 4px;min-height:2px;
  background:linear-gradient(180deg,var(--accent-1),var(--accent-2));transition:height .4s ease}
.bars-bar.best{background:linear-gradient(180deg,var(--accent-3),var(--accent-1));
  box-shadow:0 0 18px rgba(240,171,252,0.35)}
.bars-lbl{font-size:12px;color:var(--ink-mute);white-space:nowrap}
.money-card .money{margin-top:0}
.money-card .money-box strong{font-size:17px}

.note{background:var(--glass);border:1.5px solid var(--warn);border-radius:14px;
  padding:14px 18px;margin-bottom:16px;font-size:15px;line-height:1.55}
.task-card-name .tag-no{margin-left:8px;font-size:12px;font-weight:800;
  background:var(--line);color:var(--ink-mute);border-radius:6px;padding:2px 8px;vertical-align:middle}

/* ---- focus mode: start something without leaving the screen ---- */
.focus-entry{position:relative;width:100%;max-width:560px;margin-top:8px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.focus-input{flex:1;min-width:220px;background:var(--glass);border:1.5px solid var(--line);
  border-radius:14px;padding:16px 20px;color:var(--ink);font-family:inherit;font-size:18px;text-align:center}
.focus-input:focus{outline:none;border-color:var(--accent-1)}
.focus-input.nudge{border-color:var(--warn);box-shadow:0 0 0 1px var(--warn)}
.focus-entry .suggest{text-align:left}

.entry.live{background:rgba(52,211,153,0.06);border-radius:10px;margin:0 -8px;padding-left:8px;padding-right:8px}
.entry.live .big-num{color:var(--good)}
.entry.live .big-num small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;opacity:.8}

/* ---- people badges: two letters, unique per person, stable colour ---- */
.avatar{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25)}
.avatar.watching{opacity:.65;box-shadow:0 0 0 2px var(--bg-1) inset}
.people{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

/* ---- project list as rows you open ---- */
.project-row{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;color:inherit}
.project-row:hover{border-color:var(--accent-1)}
.project-row-body{flex:1;min-width:0}
.project-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.chevron{font-size:26px;color:var(--ink-mute);line-height:1}
.detail-head{display:flex;align-items:center;gap:18px;margin-bottom:18px;flex-wrap:wrap}
.detail-head h2{font-family:'"Fraunces"',serif;font-size:24px;margin:0}
.detail-head > div{flex:1;min-width:0}

/* ---- budget: hours used against hours planned ---- */
.budget{display:flex;align-items:center;gap:10px;margin-top:8px}
.budget-bar{flex:1;max-width:220px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.budget-bar div{height:100%;border-radius:99px;transition:width .3s ease}
.budget-bar .fine{background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
.budget-bar .near{background:var(--warn)}
.budget-bar .over{background:var(--bad)}
.overdue{color:var(--bad);font-weight:700}

.tag-prio{background:var(--bad);color:#fff;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:800;margin-left:8px}
.tag-watch{background:var(--line);color:var(--ink-mute);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:800;margin-left:8px}

/* ---- task detail ---- */
.task-detail{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft)}
.task-detail .descr{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
.facts{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--ink-mute);margin:10px 0 16px}
.comments{display:flex;flex-direction:column;gap:12px}
.comment{display:flex;gap:10px}
.comment-who{font-size:13.5px;font-weight:700}
.comment-body{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.comment-new{display:flex;gap:8px;margin-top:6px}
.comment-new input{flex:1;background:var(--bg-2);border:1.5px solid var(--line);border-radius:10px;
  padding:11px 14px;color:var(--ink);font-family:inherit;font-size:14px}

.entry.broken{opacity:.65}
.entry.broken .big-num{color:var(--bad)}

/* ---- task detail: above everything, including focus mode (z-index 5000) ---- */
.detail-overlay{position:fixed;inset:0;z-index:6000;display:grid;place-items:center;padding:20px;
  background:color-mix(in srgb, var(--bg-0) 82%, transparent);backdrop-filter:blur(8px)}
.detail-modal{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  width:min(760px,100%);max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 26px 16px;border-bottom:1px solid var(--line-soft)}
.detail-head h2{font-family:'Fraunces',serif;font-size:24px;margin:4px 0 0;line-height:1.25}
.detail-eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.detail-close{width:44px;height:44px;flex-shrink:0;border-radius:12px;cursor:pointer;
  background:var(--glass);border:1.5px solid var(--line);color:var(--ink);font-size:20px;font-weight:800}
.detail-close:hover{border-color:var(--bad);color:var(--bad)}
.detail-body{padding:20px 26px;overflow-y:auto;flex:1}
.detail-body section{margin-bottom:26px}
.detail-body h3{font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 10px}
.detail-facts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));margin-bottom:22px}
.fact{display:flex;flex-direction:column;gap:2px;background:var(--glass);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:11px 14px}
.fact span{font-size:11.5px;color:var(--ink-mute);font-weight:700}
.fact strong{font-size:16px}
.detail-over{background:rgba(251,191,36,0.12);border:1px solid rgba(251,191,36,0.4);
  border-radius:var(--radius-sm);padding:12px 16px;margin-bottom:22px;font-size:14.5px}
.detail-descr{font-size:15px;line-height:1.65;color:var(--ink-soft)}
.detail-descr p{margin:0 0 12px}
.detail-descr img{max-width:100%;height:auto;border-radius:10px}
.detail-descr a{color:var(--accent-2)}
.detail-descr ul,.detail-descr ol{padding-left:22px;margin:0 0 12px}
.check{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15px}
.check.done{color:var(--ink-mute);text-decoration:line-through}
.check-box{flex-shrink:0}
.who{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:15px}
.who:last-of-type{border-bottom:none}
.comment{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.comment:last-of-type{border-bottom:none}
.comment-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:5px;font-size:13.5px}
.comment-body{font-size:15px;line-height:1.6;color:var(--ink-soft)}
.comment-body p{margin:0 0 8px}
.comment-body img{max-width:100%;border-radius:8px}
.comment-new{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.comment-new textarea{background:var(--bg-2);border:1.5px solid var(--line);border-radius:12px;
  padding:13px 16px;color:var(--ink);font-family:inherit;font-size:15px;resize:vertical}
.comment-new textarea:focus{outline:none;border-color:var(--accent-1)}
.comment-new .btn{align-self:flex-end}
.detail-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  padding:16px 26px;border-top:1px solid var(--line-soft)}
.detail-foot .muted{margin-right:auto;font-size:13.5px}

.focus-task-row{display:flex;gap:8px;align-items:stretch;margin-bottom:8px}
.focus-task-row .focus-task{margin-bottom:0;flex:1}
.focus-task-detail{width:52px;flex-shrink:0;border-radius:14px;cursor:pointer;
  background:var(--glass);border:1px solid var(--line);color:var(--ink-soft);
  font-family:'Fraunces',serif;font-size:19px;font-weight:700}
.focus-task-detail:hover{border-color:var(--accent-1);color:var(--ink)}

@media (max-width:720px){
  .detail-overlay{padding:0}
  .detail-modal{width:100%;max-height:100vh;height:100vh;border-radius:0;border:none}
  .detail-head{padding:18px}
  .detail-body{padding:16px 18px}
  .detail-foot{padding:14px 18px}
}

/* ---- loading placeholders: better than a wrong "nothing here" ---- */
.skeleton{opacity:.6}
.sk-line{height:14px;border-radius:7px;background:var(--line);margin-bottom:10px;
  animation:sk 1.4s ease-in-out infinite}
.sk-line.w60{width:60%}
.sk-line.w40{width:40%;margin-bottom:0}
@keyframes sk{0%,100%{opacity:.5}50%{opacity:.9}}

/* ---- projects that expand in place ---- */
.project-card{padding:0;overflow:hidden}
.project-row{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer}
.project-row:hover{background:var(--glass-strong)}
.project-row-body{flex:1;min-width:0}
.project-row-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.chevron{color:var(--ink-mute);font-size:20px;flex-shrink:0}
.project-tasks{padding:4px 22px 18px;border-top:1px solid var(--line-soft)}
.mini-task{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.mini-task:last-child{border-bottom:none}
.mini-task-body{flex:1;min-width:0}
.mini-task-name{font-size:15.5px;font-weight:600}

/* ---- embedded via shortcode: live inside the theme, do not take it over ---- */
.ptt-embedded{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  padding:8px 4px;color:var(--ink)}
/* Keep the readable column. `max-width: none` was meant to let a narrow theme
   column win, but a wide one then stretches the whole app edge to edge, which is
   exactly what nobody wants to read. The width cap does no harm in a narrow
   container, so it stays. */
.ptt-embedded .app{max-width:1100px;padding:12px 16px 24px;min-height:0}
.ptt-embedded .focus-screen{min-height:70vh}
/* The overlays stay fixed on purpose: a modal inside a narrow column would be
   unusable, and the detail is meant to cover the page either way. */
.ptt-embedded .toast,.ptt-embedded .nudge{position:fixed}

/* ---- watching ---- */
.tab-count{margin-left:7px;background:var(--accent-1);color:#fff;border-radius:99px;
  padding:1px 8px;font-size:11.5px;font-weight:800}
.watch-icon{width:56px;flex-shrink:0;text-align:center;font-size:22px;opacity:.5}
.tag-done{margin-left:8px;font-size:11.5px;font-weight:800;background:var(--line);
  color:var(--ink-mute);border-radius:6px;padding:2px 8px;vertical-align:middle}
.task-card.dim{opacity:.55}

/* ---- embedded login (shortcode on a themed page) --------------------------
   The standalone /tracker/ login gets its dark backdrop from .ptt-fullscreen;
   the shortcode fragment has no such wrapper, so it needs its own. Keep the
   dark panel (that is the "black background" the login expects) and centre the
   card. The logged-in app embed keeps its own .ptt-embedded box. */
.ptt-embedded.login-wrap{background:var(--bg-0);border:1px solid var(--line);
  border-radius:var(--radius);padding:40px 16px;
  display:grid;place-items:center;min-height:min(70vh,560px)}
.ptt-embedded.login-wrap .login-card{margin:0;width:100%;max-width:400px}
.ptt-embedded.login-wrap #ptt-login-err{margin-top:12px}

/* ---- loading indicators ---------------------------------------------------
   A thin top bar for any in-flight request, plus a spinner for the task modal
   while it opens, so a click that fetches data does not feel like a dead app. */
.ptt-topbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;overflow:hidden;background:transparent}
.ptt-topbar span{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent-1),transparent);
  animation:ptt-slide 1s linear infinite}
@keyframes ptt-slide{0%{transform:translateX(-100%)}100%{transform:translateX(320%)}}
.ptt-spinner{display:inline-block;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--accent-1);animation:ptt-spin .7s linear infinite;vertical-align:-3px}
@keyframes ptt-spin{to{transform:rotate(360deg)}}
.ptt-spinner-box{display:flex;align-items:center;gap:10px;background:var(--bg-1);
  border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;color:var(--ink-soft);font-size:14px}

/* ---- status pencil in the task detail ------------------------------------- */
.fact-status .status-edit{display:inline-flex;align-items:center;gap:8px}
.pencil{background:none;border:none;color:var(--ink-mute);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:6px}
.pencil:hover{color:var(--ink);background:var(--glass)}
.status-select{background:var(--bg-2);color:var(--ink);border:1px solid var(--line);
  border-radius:8px;padding:4px 8px;font-family:inherit;font-size:13px}

/* ---- tiny WYSIWYG comment editor ------------------------------------------ */
.wysiwyg-bar{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.wysiwyg-bar button{background:var(--glass);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;min-width:30px;height:30px;padding:0 8px;cursor:pointer;font-size:13px;line-height:1}
.wysiwyg-bar button:hover{border-color:var(--accent-1)}
.wysiwyg-bar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.wysiwyg{min-height:70px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;color:var(--ink);font-family:inherit;font-size:14.5px;line-height:1.5;outline:none;
  overflow-y:auto;max-height:220px}
.wysiwyg:focus{border-color:var(--accent-1)}
.wysiwyg:empty::before{content:attr(data-ph);color:var(--ink-mute)}
.wysiwyg ul,.wysiwyg ol{margin:4px 0 4px 20px;padding:0}
.wysiwyg li{margin:2px 0}

/* ---- login: method panes + switch links ----------------------------------- */
.ptt-auth-pane form{display:grid;gap:10px}
.ptt-auth-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.ptt-auth-links a{color:var(--accent-1);font-size:13px;text-decoration:none;opacity:.9}
.ptt-auth-links a:hover{opacity:1;text-decoration:underline}

/* ---- entry approval badge -------------------------------------------------- */
.entry-review{margin-top:3px}
.rev{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;border:1px solid transparent}
.rev-mute{color:var(--ink-mute);border-color:var(--line)}
.rev-ok{color:#0a7d33;background:color-mix(in srgb,#0a7d33 12%,transparent);border-color:color-mix(in srgb,#0a7d33 30%,transparent)}
.rev-warn{color:#b26a00;background:color-mix(in srgb,#b26a00 12%,transparent);border-color:color-mix(in srgb,#b26a00 30%,transparent)}
.rev-bad{color:#c62828;background:color-mix(in srgb,#c62828 12%,transparent);border-color:color-mix(in srgb,#c62828 30%,transparent)}

/* ---- assign-to-task modal -------------------------------------------------- */
.assign-modal{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  width:min(520px,92vw);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.assign-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.assign-head h3{margin:0}
.assign-search{margin:14px 18px 6px;padding:10px 12px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:10px;color:var(--ink);font-family:inherit;font-size:14.5px;outline:none}
.assign-search:focus{border-color:var(--accent-1)}
.assign-list{overflow-y:auto;padding:6px 10px 14px}
.assign-empty{padding:18px;color:var(--ink-mute);font-size:14px}
.assign-project{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute);
  padding:12px 8px 4px;position:sticky;top:0;background:var(--bg-1)}
.assign-task{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  text-align:left;background:none;border:none;border-radius:10px;padding:10px 10px;color:var(--ink);
  font-family:inherit;font-size:14.5px;cursor:pointer}
.assign-task:hover{background:var(--glass)}
.assign-task-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.assign-badge{flex:none;font-size:11px;font-weight:600;color:var(--accent-1);
  border:1px solid color-mix(in srgb,var(--accent-1) 40%,transparent);border-radius:999px;padding:1px 8px}

/* ---- what's new modal ------------------------------------------------------ */
.news-modal{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--radius);
  width:min(560px,92vw);max-height:82vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.news-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.news-head h3{margin:0}
.news-list{overflow-y:auto;padding:6px 18px 18px}
.news-item{padding:14px 0;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:none}
.news-title{font-weight:700;margin-bottom:4px}
.news-item p{margin:0;color:var(--ink-soft);font-size:14px;line-height:1.55}

/* total row inside "who is working" */
.who-total{display:flex;justify-content:space-between;align-items:center;padding-top:8px;margin-top:6px;border-top:1px solid var(--line)}

/* ---- boot preloader (hides the flash of the un-compiled Vue template) ------ */
[v-cloak]{display:none !important}
.ptt-boot{display:grid;place-items:center}
.ptt-boot-full{position:fixed;inset:0;background:var(--bg-0);z-index:100000}
.ptt-boot-inline{min-height:320px}
.ptt-boot-spin{width:34px;height:34px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent-1);animation:ptt-spin .7s linear infinite}

/* ---- attachments (images + file links, referenced from Perfex) ------------- */
.attach-grid{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0}
.attach{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;
  text-decoration:none;background:var(--bg-2);max-width:180px}
.attach img{display:block;width:180px;height:120px;object-fit:cover}
.attach-file{padding:10px 12px;color:var(--ink);font-size:13px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attach:hover{border-color:var(--accent-1)}

/* ---- status picker (current → choose → confirm) ---------------------------- */
.status-box{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.status-cur{font-weight:700}
.status-choices{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.status-chip{background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:4px 12px;font-size:13px;font-family:inherit;cursor:pointer}
.status-chip:hover{border-color:var(--accent-1);color:var(--accent-1)}
.status-confirm{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.status-confirm-actions{display:flex;gap:8px}
.pencil{background:none;border:none;color:var(--ink-mute);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:6px}
.pencil:hover{color:var(--accent-1);background:var(--glass)}