/*
  Timelance design layer.
  Loaded after styles.css. It owns typography, spacing, surfaces and controls for every owner page,
  and fixes layout defects (overview grid gaps, stacked cards touching, raw date/file inputs,
  unstyled helper paragraphs, task-card overflow). Behaviour and markup stay in app.js.
*/

:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --ink:#141b17;
  --ink-2:#2c3530;
  --muted:#5b665f;
  --faint:#87918a;
  --line:#e6e8e3;
  --line-strong:#d6dad3;
  --paper:#ffffff;
  --canvas:#f5f6f3;
  --subtle:#f8f9f6;
  --sidebar:#fbfbf9;
  --accent:#1e6b4d;
  --accent-hover:#175a40;
  --accent-ink:#18573f;
  --accent-soft:#e8f2ec;
  --accent-ring:rgba(30,107,77,.22);
  --warn:#9a5b0c;--warn-soft:#fbf1e1;
  --danger:#a8382d;--danger-soft:#fbecea;
  --radius-sm:8px;--radius:12px;--radius-lg:16px;
  --shadow-xs:0 1px 2px rgba(16,24,20,.05);
  --shadow-sm:0 1px 2px rgba(16,24,20,.04),0 2px 8px rgba(16,24,20,.04);
  --shadow:0 1px 2px rgba(16,24,20,.04),0 8px 24px -6px rgba(16,24,20,.08);
  --shadow-lg:0 2px 6px rgba(16,24,20,.05),0 24px 64px -12px rgba(16,24,20,.22);
  font-family:var(--font);
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
html[data-theme="dark"]{
  --ink:#ecf0ed;--ink-2:#d3dad5;--muted:#a3ada6;--faint:#7f8a83;
  --line:#2a312d;--line-strong:#39423d;
  --paper:#171c19;--canvas:#0f1311;--subtle:#1b211e;--sidebar:#131714;
  --accent:#3f9e72;--accent-hover:#4bb083;--accent-ink:#8fd3b0;--accent-soft:#1c2e25;--accent-ring:rgba(95,190,145,.3);
  --warn:#e2b56a;--warn-soft:#2f2718;--danger:#ec9a90;--danger-soft:#3a2321;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.2);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -6px rgba(0,0,0,.4);
  --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 24px 64px -12px rgba(0,0,0,.6);
}

body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.5}
button,input,select,textarea{font-family:var(--font)}
::selection{background:var(--accent-soft);color:var(--accent-ink)}

/* Shared type */
h1,h2,h3,.brand,.big-metric,.timer-digits,.metric-card strong,.financial-metrics strong,.art-copy,
.page-heading h1,.section-heading h2,.table-heading h2,.modal h2,.task-card h3,.task-column>header h2,
.project-card-title h3,.timer-card h2,.attention-panel .section-heading h2,.command-dialog h2,.auth-card h1,.error-screen h1,.offline-timer-shell h1{font-family:var(--font-display)}
.eyebrow,.nav-label,.metric-label{font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted);font-size:14px;line-height:1.55}
.optional{color:var(--muted);font-weight:450}
a{color:inherit}

/* App shell */
.workspace{grid-template-columns:260px minmax(0,1fr);background:var(--canvas)}
.sidebar{width:260px;padding:22px 14px 16px;background:var(--sidebar);border-right:1px solid var(--line);overflow-y:auto}
.sidebar>.brand{padding:0 10px 24px;font-size:18px;letter-spacing:-.4px;color:var(--ink)}
.brand-mark{width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,#2b8a63 0%,#1a5c42 100%);color:#fff;font-size:18px;font-weight:800;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 10px -2px rgba(26,92,66,.45)}
.workspace-context{padding:10px 12px;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-xs)}
.workspace-avatar,.profile-avatar{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:700}
.profile-avatar{border-radius:50%;background:#efe7dc;color:#6f5236}
.workspace-context strong,.profile strong{font-size:13px;font-weight:650;color:var(--ink);max-width:160px}
.workspace-context small,.profile small{font-size:12px;color:var(--muted);margin-top:2px}
.nav-label{padding:0 12px;margin:0 0 8px;font-size:11px}
.sidebar nav{gap:2px}
.nav-item{position:relative;height:38px;padding:0 12px;gap:12px;border-radius:9px;color:var(--ink-2);font-size:14px;font-weight:500;transition:background .15s,color .15s}
.nav-item>span:first-child{font-size:16px;width:18px;color:var(--muted)}
.nav-item:hover{background:rgba(20,27,23,.045);color:var(--ink)}
.nav-item.selected{background:var(--paper);color:var(--accent-ink);font-weight:650;box-shadow:var(--shadow-sm);outline:1px solid var(--line)}
.nav-item.selected::before{content:'';position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-item.selected>span:first-child{color:var(--accent)}
.nav-item kbd{font-size:11px;color:var(--faint)}
.nav-count{font-size:11px;padding:2px 7px;background:var(--warn-soft);color:var(--warn)}
.sidebar-bottom{padding-top:16px}
.profile{padding:14px 6px 0;border-top:1px solid var(--line)}
.icon-button{width:32px;height:32px;border-radius:8px;color:var(--muted)}
.icon-button:hover{background:rgba(20,27,23,.06);color:var(--ink)}

.main-area{grid-column:2}
.topbar{position:sticky;top:0;z-index:4;height:60px;padding:0 clamp(24px,4vw,56px);background:color-mix(in srgb,var(--canvas) 82%,transparent);backdrop-filter:saturate(1.6) blur(12px);-webkit-backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--line)}
.breadcrumb{font-size:13px;color:var(--muted)}
.breadcrumb strong{color:var(--ink);font-weight:600}
.breadcrumb>span{color:var(--line-strong)}
.top-actions{gap:10px}
.theme-toggle,.command-trigger{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--paper);color:var(--muted);font-size:13px;font-weight:500;box-shadow:var(--shadow-xs);transition:border-color .15s,color .15s}
.theme-toggle:hover,.command-trigger:hover{color:var(--ink);border-color:var(--line-strong);background:var(--paper)}
.command-trigger{gap:24px}
.command-trigger kbd{font-size:11px;padding:2px 6px;border-radius:5px;border:1px solid var(--line);background:var(--subtle);color:var(--muted)}
.local-indicator{font-size:12px;color:var(--muted);padding:0 4px}
.local-indicator i{box-shadow:0 0 0 3px rgba(85,163,126,.18)}

.content{max-width:1240px;padding:36px clamp(24px,4vw,56px) 72px}

/* Page header */
.page-heading{align-items:flex-end;margin-bottom:28px;gap:24px}
.page-heading .eyebrow{color:var(--accent-ink)}
.page-heading h1{font-size:clamp(28px,2.6vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.15;margin:8px 0 8px;color:var(--ink)}
.page-heading .muted{font-size:15px;max-width:64ch}
.heading-actions{gap:10px}

/* Buttons */
.button{min-height:40px;height:auto;padding:9px 16px;gap:10px;border-radius:10px;font-size:14px;font-weight:600;letter-spacing:-.005em;transition:background .15s,border-color .15s,box-shadow .15s,transform .1s}
.button span{font-size:15px;line-height:1}
.button.primary{background:var(--accent);border:1px solid var(--accent);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(16,24,20,.12),0 4px 12px -4px rgba(30,107,77,.45)}
.button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.outline{background:var(--paper);border:1px solid var(--line-strong);color:var(--ink-2);box-shadow:var(--shadow-xs)}
.button.outline:hover{background:var(--subtle);border-color:var(--faint);color:var(--ink)}
.button.full{min-height:42px}
.button:disabled,.button[aria-disabled="true"]{opacity:.5;box-shadow:none}
.text-button{color:var(--accent-ink);font-size:13px;font-weight:600;padding:6px 8px;border-radius:7px}
.text-button:hover:not(:disabled){background:var(--accent-soft)}
.danger-text{color:var(--danger)!important}
.danger-text:hover:not(:disabled){background:var(--danger-soft)!important}
.share-button{padding:5px 10px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink-2);font-size:12px;font-weight:600}
.share-button:hover{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Surfaces */
.card,.metric-card,.project-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.content>section+section,.content>.card+.card,.content>section+.card,.content>.card+section,.content>form+section,.content>section+form,.content>div+section.card,.content>.metric-grid+.card,.content>.card+.metric-grid{margin-top:20px}
.content>.page-heading+*{margin-top:0}
.metric-grid{gap:16px;margin:20px 0}
.metric-card{padding:20px 22px;gap:6px;transition:box-shadow .2s,transform .2s}
.metric-card strong{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.metric-card small{font-size:13px;color:var(--muted)}
.metric-label{font-size:11px}

/* Overview */
.overview-grid{grid-template-columns:minmax(260px,.9fr) minmax(420px,1.6fr);gap:20px}
.overview-grid .attention-panel{grid-column:1/-1;margin-top:0}
.today-card{position:relative;overflow:hidden;padding:24px 26px;min-height:0;color:#eaf5ee;background:radial-gradient(120% 140% at 100% 0%,#2f8e66 0%,#1d6447 45%,#174e39 100%);border:0;box-shadow:0 10px 30px -10px rgba(23,78,57,.55)}
.today-card::after{content:'';position:absolute;right:-60px;bottom:-80px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(255,255,255,.12);box-shadow:0 0 0 22px rgba(255,255,255,.035),0 0 0 44px rgba(255,255,255,.025);pointer-events:none}
.today-card .eyebrow,.today-card .tiny-icon{color:rgba(234,245,238,.8)}
.today-card .big-metric{color:#fff;font-size:48px;font-weight:700;letter-spacing:-.035em;margin-top:18px}
.today-card .metric-caption{color:rgba(234,245,238,.78);font-size:13px}
.today-card .metric-rule{background:rgba(255,255,255,.16);margin:20px 0 10px}
.today-card .small-row{color:rgba(234,245,238,.82);font-size:13px;padding:5px 0}
.today-card .small-row strong{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
.timer-card{padding:24px 26px;min-height:0}
.timer-card h2{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.timer-hint{font-size:14px!important;margin:16px 0 18px!important}
.timer-pulse{width:10px;height:10px;background:var(--line-strong)}
.timer-pulse.running{background:#3fae7c;box-shadow:0 0 0 0 rgba(63,174,124,.5);animation:tl-pulse 1.8s ease-out infinite}
@keyframes tl-pulse{0%{box-shadow:0 0 0 0 rgba(63,174,124,.45)}100%{box-shadow:0 0 0 10px rgba(63,174,124,0)}}
.timer-current strong{font-size:15px;color:var(--ink)}
.timer-current span{font-size:13px;color:var(--muted)}
.timer-digits{font-family:var(--font-mono)!important;font-size:40px;font-weight:600;letter-spacing:-.03em;color:var(--accent-ink);font-variant-numeric:tabular-nums;margin:8px 0 16px}
.timer-controls{gap:10px;flex-wrap:wrap}
.timer-controls .button{min-height:38px}
.start-form{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:10px}
.start-form select{height:42px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background-color:var(--paper);color:var(--ink);font-size:14px}
.start-form .button{height:42px;min-height:42px}
.start-form .timer-billable-toggle{font-size:13px;color:var(--ink-2)}
.attention-panel{padding:22px 26px}
.attention-panel .section-heading h2{font-size:18px;font-weight:700;letter-spacing:-.015em}
.attention-count{min-width:30px;height:30px;font-size:13px;background:var(--accent-soft);color:var(--accent-ink)}
.attention-item{padding:13px 0;border-top:1px solid var(--line)}
.attention-item strong{font-size:14px;color:var(--ink)}
.attention-item small{font-size:12px;color:var(--muted)}
.attention-value{font-size:13px;color:var(--ink-2)}
.attention-mark{width:28px;height:28px;font-size:13px}
.attention-policy,.attention-empty{font-size:13px;color:var(--muted);line-height:1.55}
.attention-policy{padding-top:12px;margin-top:14px;border-top:1px dashed var(--line)}
.dashboard-summary{grid-template-columns:1fr 1.6fr}
.dashboard-summary .metric-card strong{font-size:26px}
.section-block{margin-top:36px}
.section-heading{margin-bottom:16px}
.section-heading h2{font-size:20px;font-weight:700;letter-spacing:-.02em}
.section-heading .eyebrow{color:var(--accent-ink)}

/* Project cards */
.project-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.project-card{min-height:200px;transition:box-shadow .2s,transform .2s,border-color .2s}
.project-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--line-strong)}
.project-color{width:4px}
.project-card-main{padding:22px 24px 18px;display:flex;flex-direction:column}
.project-card-title{gap:12px}
.project-card-title .eyebrow{font-size:11px;letter-spacing:.06em}
.project-card-title h3{font-size:19px;font-weight:700;letter-spacing:-.02em;margin:6px 0 2px;color:var(--ink)}
.project-summary{font-size:14px;color:var(--muted);margin:6px 0 18px}
.progress-label{font-size:12px;color:var(--muted);margin-bottom:8px}
.progress-track{height:6px;background:var(--accent-soft);border-radius:99px}
.progress-track span{background:linear-gradient(90deg,#3fae7c,#1e6b4d);border-radius:99px;min-width:0}
.project-card-foot{font-size:13px;color:var(--ink-2);margin-top:18px;padding-top:14px;border-top:1px solid var(--line);gap:8px;text-transform:capitalize}
.project-card-foot .status-dot{width:7px;height:7px;box-shadow:0 0 0 3px rgba(85,163,126,.18)}
.billing-tag,.source-pill,.active-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:99px;background:var(--subtle);border:1px solid var(--line);color:var(--ink-2);font-size:12px;font-weight:550;text-transform:none}
.active-pill{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.project-card .share-button{font-size:12px}

/* Empty states */
.empty-state{padding:48px 24px;border:1px dashed var(--line-strong);border-radius:var(--radius-lg);background:var(--paper)}
.empty-icon{width:44px;height:44px;border-radius:12px;font-size:20px;background:var(--accent-soft);color:var(--accent-ink)}
.empty-state h3,.table-empty h3{font-size:16px;font-weight:650;color:var(--ink);margin-bottom:6px}
.empty-state p,.table-empty p{font-size:14px;color:var(--muted);margin-bottom:18px}
.table-empty{padding:44px 20px}
.table-empty .button{height:auto;min-height:38px}

/* Tables */
.table-card{overflow:hidden}
.table-heading{padding:22px 24px 14px;border-bottom:0;gap:16px;flex-wrap:wrap}
.table-heading>div:first-child{gap:12px;flex-wrap:wrap;align-items:baseline}
.table-heading h2{font-size:17px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.table-heading span{font-size:13px;color:var(--muted)}
.search-box{height:36px;border-radius:9px;border:1px solid var(--line-strong);background:var(--paper);padding:0 11px}
.search-box input{font-size:13px;width:180px;min-height:0!important;border:0!important;padding:0!important;box-shadow:none!important;background:transparent!important}
table{font-variant-numeric:tabular-nums}
th{height:40px;padding:0 24px;background:var(--subtle);color:var(--muted);font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;border-top:1px solid var(--line);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 24px;font-size:14px;color:var(--ink-2);vertical-align:middle}
td strong{font-size:14px;color:var(--ink);font-weight:600}
tbody tr{transition:background .12s}
tbody tr:hover td{background:var(--subtle)}
tbody tr+tr td{border-top:1px solid var(--line)}
.table-sub{font-size:12px;color:var(--muted)}
.table-note{margin:0;padding:16px 24px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6}
.client-avatar{width:34px;height:34px;border-radius:10px;font-size:13px}
.timesheet-day td{background:var(--accent-soft)!important;color:var(--accent-ink);font-size:12px;font-weight:650;letter-spacing:.02em}
.timesheet-day td span{color:var(--accent-ink)}
.row-actions{gap:2px}

/* Forms: every control inside the workspace, modals and auth gets the same treatment */
.content label,.modal label,.auth-card label{color:var(--ink);font-size:13px;font-weight:600;line-height:1.35}
.content input:not([type=checkbox]):not([type=radio]):not([type=file]):not(.search-box input),
.content select,.content textarea,
.modal input:not([type=checkbox]):not([type=radio]):not([type=file]),.modal select,.modal textarea,
.auth-card input{width:100%;min-height:42px;height:auto;padding:10px 13px;border:1px solid var(--line-strong);border-radius:10px;background-color:var(--paper);color:var(--ink);font-size:14px;line-height:1.35;box-shadow:var(--shadow-xs);transition:border-color .15s,box-shadow .15s;appearance:none;-webkit-appearance:none}
.content select,.modal select,.start-form select,.task-card select{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23707a73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;appearance:none;-webkit-appearance:none}
.content textarea,.modal textarea{min-height:96px;resize:vertical;line-height:1.5}
.content input:hover:not(:focus):not([type=checkbox]):not([type=radio]),.content select:hover:not(:focus),.content textarea:hover:not(:focus),.modal input:hover:not(:focus):not([type=checkbox]):not([type=radio]),.modal select:hover:not(:focus),.modal textarea:hover:not(:focus),.auth-card input:hover:not(:focus){border-color:var(--faint)}
.content input:focus,.content select:focus,.content textarea:focus,.modal input:focus,.modal select:focus,.modal textarea:focus,.auth-card input:focus{outline:none!important;border-color:var(--accent)!important;box-shadow:0 0 0 4px var(--accent-ring)!important}
.content input[type=date]{font-variant-numeric:tabular-nums}
.content input[type=date]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.content input[type=file],.modal input[type=file]{width:100%;padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--subtle);color:var(--muted);font-size:13px}
.content input[type=file]::file-selector-button,.modal input[type=file]::file-selector-button{margin-right:12px;padding:7px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--paper);color:var(--ink);font:600 13px var(--font);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.check-label input{width:16px!important;height:16px!important}
input::placeholder,textarea::placeholder{color:var(--faint)}
.form-error{color:var(--danger);font-size:13px}
.form-split{gap:16px}
.content form.form-split{align-items:end}
.content form.form-split>.button{align-self:end}

/* Settings / filter cards */
.settings-card{padding:24px 28px 26px}
.settings-card>.table-heading{padding:0 0 18px;margin:0 0 20px;border-bottom:1px solid var(--line)}
.settings-card>form{display:grid;gap:18px}
.settings-card>form>.button,.settings-card>form>button{justify-self:start}
.settings-grid{gap:18px 20px}
.settings-grid>label,.settings-card form>label:not(.check-label){display:grid;gap:8px}
.settings-card .optional,.settings-card p.optional,.settings-grid .optional{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.settings-card .table-scroll{margin:6px -28px -26px;border-top:1px solid var(--line)}
.settings-card .table-scroll th{border-top:0}
.settings-actions{margin-top:4px;padding-top:18px;border-top:1px solid var(--line)!important}
.settings-actions .muted{font-size:13px}
.timesheet-filters{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.timesheet-filters .form-actions{gap:12px}
.check-label{font-size:14px!important;font-weight:500!important;color:var(--ink-2)!important}
.invoice-logo-preview{font-size:13px}
.entry-picker{border-radius:12px;padding:6px 14px;background:var(--subtle)}
.entry-picker legend{font-size:13px;color:var(--ink)}
.entry-option strong{font-size:13px}
.entry-option small{font-size:12px}
.payment-due{font-size:14px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);padding:12px 14px}
.payment-due strong{color:var(--accent-ink)}

/* Scope & delivery */
.scope-grid{gap:20px;margin-top:20px}
.scope-grid .section-heading h2{font-size:19px}
.scope-form{gap:16px;padding:20px;border-radius:var(--radius);background:var(--subtle);border:1px solid var(--line)!important}
.scope-form label{display:grid;gap:8px}
.scope-grid .table-scroll{margin:0 -28px -26px;border-top:1px solid var(--line)}
.scope-grid .table-scroll th{border-top:0}
.scope-grid a{color:var(--accent-ink)}

/* Tasks */
.task-board{gap:16px;padding-bottom:16px}
.task-column{padding:14px;min-height:220px;border-radius:var(--radius-lg);background:color-mix(in srgb,var(--line) 45%,var(--canvas));border:1px solid var(--line)}
.task-column>header{padding:4px 6px 14px}
.task-column>header h2{font-size:14px;font-weight:700;color:var(--ink)}
.task-column>header span{min-width:24px;height:24px;font-size:12px;font-weight:650;background:var(--paper);color:var(--ink-2);border:1px solid var(--line)}
.task-card{min-width:0;gap:12px;padding:16px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.task-card:hover{box-shadow:var(--shadow);transform:translateY(-1px)}
.task-card .eyebrow{font-size:10px;color:var(--accent-ink)}
.task-card h3{font-size:15px;font-weight:650;line-height:1.35;color:var(--ink)}
.task-card>label{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;font-size:12px;color:var(--muted)}
.task-card select,.task-card .task-status{max-width:none!important;width:100%;min-height:36px!important;padding:6px 32px 6px 10px!important;font-size:13px!important;border-radius:8px!important;border:1px solid var(--line-strong)!important;background-color:var(--paper)!important;color:var(--ink)!important}
.task-card>div{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start;padding-top:10px;border-top:1px solid var(--line)}
.task-card .text-button{font-size:12px;padding:5px 8px;white-space:nowrap}
.task-column-empty{font-size:13px;color:var(--muted);text-align:center;padding:26px 8px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 50%,transparent)}
.task-phase{font-size:12px}

/* Activity */
.activity-list{gap:12px}
.activity-row{padding:18px 22px;gap:16px}
.activity-marker{width:38px;height:38px;flex-basis:38px;background:var(--accent-soft);color:var(--accent-ink);font-size:13px}
.activity-title strong{font-size:15px;color:var(--ink)}
.activity-title time,.activity-content>p,.activity-content details{font-size:13px;color:var(--muted)}
.activity-content pre{font-family:var(--font-mono);font-size:12px;background:var(--subtle);border:1px solid var(--line)}

/* Project detail & finance blocks */
.project-detail-grid{gap:20px}
.project-detail-list p{background:var(--subtle);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.project-detail-list p span{font-size:13px;color:var(--muted)}
.financial-metrics{gap:12px;margin:8px 24px 24px}
.financial-metrics>div{padding:16px;background:var(--subtle);border:1px solid var(--line);border-radius:var(--radius)}
.financial-metrics span{font-size:12px;color:var(--muted)}
.financial-metrics strong{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.financial-metrics small{font-size:12px;color:var(--muted)}
.budget-usage-label{font-size:12px}
.budget-track{height:7px;background:var(--accent-soft)}
.budget-track>span{background:linear-gradient(90deg,#3fae7c,#1e6b4d)}
.detail-badges{gap:6px}

/* Modals, command palette, toast */
.modal-backdrop{background:rgba(12,18,15,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:tl-fade .18s ease-out}
.modal{width:min(560px,100%);padding:30px 32px;border-radius:20px;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow-lg);animation:tl-rise .22s cubic-bezier(.2,.8,.2,1)}
.modal h2{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.modal>.muted{font-size:14px}
.modal label{display:grid;gap:8px}
.modal-close{width:34px;height:34px;border-radius:9px;right:16px;top:16px;font-size:20px;color:var(--muted)}
.modal-close:hover{background:var(--subtle);color:var(--ink)}
.modal-actions{gap:10px;padding-top:6px}
.command-dialog{padding:16px;border-radius:18px;border:1px solid var(--line);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-lg)}
.command-dialog input{height:46px;border-radius:12px;border:1px solid var(--line-strong);background:var(--subtle);color:var(--ink);font-size:15px;padding:0 14px}
.command-dialog input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.command-option{padding:11px 12px;border-radius:10px;background:transparent;color:var(--ink);font-size:14px}
.command-option:hover,.command-option[aria-selected=true]{background:var(--accent-soft);color:var(--accent-ink)}
.command-option small{font-size:12px;color:var(--muted)}
.command-hint{font-size:12px}
.toast{bottom:24px;right:24px;padding:12px 18px;border-radius:12px;background:#14231b;color:#fff;font-size:14px;font-weight:500;box-shadow:var(--shadow-lg)}
.toast.error{background:#7e2f27}
@keyframes tl-fade{from{opacity:0}to{opacity:1}}
@keyframes tl-rise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* Sign in / sign up */
.auth-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);background:var(--paper)}
.auth-card{width:min(400px,calc(100% - 48px))}
.auth-card>.brand{margin-bottom:56px;font-size:19px}
.auth-card>.eyebrow{color:var(--accent-ink);font-size:11px}
.auth-card h1{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1.12;color:var(--ink)}
.auth-card>.muted{font-size:15px;margin-bottom:32px}
.auth-card form{gap:18px}
.auth-card label{display:grid;gap:8px}
.auth-card .button.full{min-height:46px;font-size:15px;margin-top:4px}
.auth-toggle{font-size:14px;color:var(--muted);margin-top:22px}
.auth-toggle a{color:var(--accent-ink)}
.auth-foot{font-size:12px;color:var(--muted);margin-top:18px}
.auth-art{margin:14px;min-height:calc(100vh - 28px);border-radius:24px;padding:48px;background:radial-gradient(90% 80% at 85% 15%,#2f8e66 0%,rgba(47,142,102,0) 60%),radial-gradient(70% 70% at 10% 100%,#3c9a73 0%,rgba(60,154,115,0) 60%),linear-gradient(160deg,#1c5e44 0%,#123d2d 100%);color:#eaf5ee}
.art-note{font-size:13px;color:rgba(234,245,238,.85)}
.art-note .live-dot{background:#7fe0b0;box-shadow:0 0 0 4px rgba(127,224,176,.2)}
.art-copy{color:#fff;font-size:clamp(44px,4.6vw,64px);font-weight:700;letter-spacing:-.035em}
.art-copy em{color:rgba(234,245,238,.72);font-weight:500}
.art-lines{border-color:rgba(255,255,255,.14)}

/* Loading & errors */
.loading,.workspace-loading{color:var(--muted);font-size:15px}
.loading-lines i{background:var(--line-strong)}
.error-screen h1{font-size:26px;color:var(--ink)}
.error-screen p{font-size:15px;color:var(--muted)}
.workspace-status-banner strong{font-size:14px}
.workspace-status-banner p,.workspace-refresh-status{font-size:13px}
.offline-queue-notice strong{font-size:14px}
.offline-queue-notice p{font-size:13px}

/* Dark-mode specifics that tokens alone can't express */
html[data-theme="dark"] .nav-item:hover,html[data-theme="dark"] .icon-button:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .nav-item.selected{background:var(--paper);color:var(--accent-ink);outline-color:var(--line)}
html[data-theme="dark"] .nav-item{color:var(--ink-2)}
html[data-theme="dark"] .sidebar,html[data-theme="dark"] .topbar{background:var(--sidebar)}
html[data-theme="dark"] .topbar{background:color-mix(in srgb,var(--canvas) 82%,transparent)}
html[data-theme="dark"] .profile-avatar{background:#3a3128;color:#e7cfae}
html[data-theme="dark"] .button.primary{background:#2a8a5f;border-color:#2a8a5f;color:#fff}
html[data-theme="dark"] .button.primary:hover{background:#2f9867;border-color:#2f9867}
html[data-theme="dark"] .button.outline,html[data-theme="dark"] .theme-toggle,html[data-theme="dark"] .command-trigger{background:var(--subtle);border-color:var(--line-strong);color:var(--ink-2)}
html[data-theme="dark"] .content input:not([type=checkbox]):not([type=radio]):not([type=file]),html[data-theme="dark"] .content select,html[data-theme="dark"] .content textarea,html[data-theme="dark"] .modal input:not([type=checkbox]):not([type=radio]):not([type=file]),html[data-theme="dark"] .modal select,html[data-theme="dark"] .modal textarea,html[data-theme="dark"] .auth-card input,html[data-theme="dark"] .start-form select{background-color:var(--subtle);border-color:var(--line-strong);color:var(--ink)}
html[data-theme="dark"] .content input[type=date]{color-scheme:dark}
html[data-theme="dark"] th,html[data-theme="dark"] .table-scroll th{background:var(--subtle);color:var(--muted);border-color:var(--line)}
html[data-theme="dark"] td,html[data-theme="dark"] .table-scroll td{color:var(--ink-2);border-color:var(--line)}
html[data-theme="dark"] tbody tr:hover td{background:var(--subtle)}
html[data-theme="dark"] .today-card{background:radial-gradient(120% 140% at 100% 0%,#277a57 0%,#17503a 50%,#113a2b 100%)}
html[data-theme="dark"] .task-column{background:#131815;border-color:var(--line)}
html[data-theme="dark"] .scope-form,html[data-theme="dark"] .project-detail-list p{background:var(--subtle);border-color:var(--line)!important}
html[data-theme="dark"] .auth-wrap{background:var(--paper)}
html[data-theme="dark"] .auth-art{background:radial-gradient(90% 80% at 85% 15%,#226b4c 0%,rgba(34,107,76,0) 60%),linear-gradient(160deg,#16473a 0%,#0c2a20 100%)}
html[data-theme="dark"] .toast{background:#1f3a2c}
html[data-theme="dark"] .modal-close:hover{background:var(--subtle)}
html[data-theme="dark"] .content select,html[data-theme="dark"] .modal select,html[data-theme="dark"] .start-form select,html[data-theme="dark"] .task-card select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23a3ada6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Responsive */
@media(max-width:1100px){
  .workspace{grid-template-columns:224px minmax(0,1fr)}
  .sidebar{width:224px}
  .overview-grid{grid-template-columns:1fr}
  .start-form{grid-template-columns:1fr 1fr}
  .start-form .button{grid-column:1/-1}
}
@media(max-width:740px){
  .workspace{display:block}
  .sidebar{width:auto;height:66px;padding:6px 8px;background:color-mix(in srgb,var(--sidebar) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);overflow:visible}
  .nav-item{height:52px;min-width:64px;flex:0 0 64px;font-size:11px;gap:3px;padding:4px}
  .nav-item.selected::before{display:none}
  .topbar{height:56px;padding:0 16px}
  .command-trigger span{display:none}
  .command-trigger{gap:0}
  .content{padding:24px 16px 96px}
  .page-heading{flex-direction:column;align-items:stretch}
  .page-heading h1{font-size:26px}
  .today-card .big-metric{font-size:40px}
  .project-grid{grid-template-columns:1fr}
  .dashboard-summary{grid-template-columns:1fr}
  .settings-card{padding:20px 18px}
  .settings-card .table-scroll,.scope-grid .table-scroll{margin:6px -18px -20px}
  .auth-art{display:none}
  .auth-wrap{grid-template-columns:1fr}
  .modal{padding:24px 20px}
  .toast{bottom:84px}
}

/* Date range forms (timesheet, reports) sit on one row with their submit button */
.settings-card>form.form-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}
.settings-card>form.form-split+.optional{margin-top:12px}
@media(max-width:740px){.settings-card>form.form-split{grid-template-columns:1fr}}

/* Metric rows fill the line regardless of how many cards a page renders */
.metric-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.dashboard-summary{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}

/* Footnotes that sit directly inside cards (budgets, reports, project detail) */
.card>p.optional,.card>p.muted:last-child,.table-card>.optional,.budget-definition{margin:0!important;padding:16px 24px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6}

/* Tables: identifiers and money never wrap; action links stay on one line */
td:first-child strong,td:first-child{white-space:nowrap}
.content td .row-actions,.content td:last-child{white-space:nowrap}
td .text-button+.text-button,td .text-button+a.text-button,td a.text-button+.text-button{margin-left:2px}
td a.text-button{display:inline-block}

/* Status pills */
.source-pill[data-status]{text-transform:capitalize;font-weight:600;gap:6px}
.source-pill[data-status]::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.85}
.source-pill[data-status="draft"]{background:var(--subtle);color:var(--muted)}
.source-pill[data-status="issued"],.source-pill[data-status="sent"]{background:#e9f0fb;border-color:#d3e0f5;color:#1f4f8f}
.source-pill[data-status="partially_paid"]{background:var(--warn-soft);border-color:#f0dcb8;color:var(--warn)}
.source-pill[data-status="paid"]{background:var(--accent-soft);border-color:#cfe5d8;color:var(--accent-ink)}
.source-pill[data-status="overdue"]{background:var(--danger-soft);border-color:#f2cfca;color:var(--danger)}
.source-pill[data-status="void"],.source-pill[data-status="voided"],.source-pill[data-status="credited"]{background:var(--subtle);color:var(--muted);text-decoration:line-through}
html[data-theme="dark"] .source-pill[data-status="issued"],html[data-theme="dark"] .source-pill[data-status="sent"]{background:#1b2a3d;border-color:#2b4060;color:#9cc1f0}
html[data-theme="dark"] .source-pill[data-status="partially_paid"]{border-color:#4a3c22}
html[data-theme="dark"] .source-pill[data-status="paid"]{border-color:#2a4a39}
html[data-theme="dark"] .source-pill[data-status="overdue"]{border-color:#5a312c}

/* Invoice & payment modals: wider, with real sections instead of browser fieldsets */
.modal:has(#invoice-client),.modal:has(.manual-invoice-line){width:min(680px,100%)}
.modal fieldset{min-width:0;margin:0;padding:0;border:0}
.modal .entry-picker{display:block;max-height:none;overflow:visible;padding:0;margin:0;border:0;background:none}
.modal .entry-picker>legend{float:left;width:100%;padding:0;margin:0 0 10px;font-size:13px;font-weight:650;color:var(--ink)}
.modal .entry-picker>legend+*{clear:both}
.modal .entry-picker>p.muted{margin:0;padding:14px 16px;border:1px dashed var(--line-strong);border-radius:12px;background:var(--subtle);font-size:13px}
.modal .entry-picker:has(.entry-option){border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.modal .entry-picker:has(.entry-option)>legend{padding:12px 16px 0}
.modal .entry-picker .entry-option{display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;gap:12px!important;padding:12px 16px!important;margin:0;border-top:1px solid var(--line);cursor:pointer;transition:background .12s}
.modal .entry-picker .entry-option:hover{background:var(--subtle)}
.modal .entry-picker .entry-option:has(input:checked){background:color-mix(in srgb,var(--accent-soft) 60%,var(--paper))}
.modal .entry-picker .entry-option input{width:16px!important;height:16px!important;margin:0}
.modal .entry-picker .entry-option strong{font-size:14px;font-weight:600;color:var(--ink)}
.modal .entry-picker .entry-option small{font-size:12px;color:var(--muted);margin-top:3px}
.modal .entry-picker:has(.entry-option){max-height:300px;overflow-y:auto}
.modal .section-heading{margin:8px 0 0;padding-top:20px;border-top:1px solid var(--line);align-items:flex-start;gap:16px}
.modal .section-heading h3{margin:0;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.modal .section-heading .optional{display:block;margin-top:3px;font-size:13px}
.modal .section-heading .button{min-height:36px;padding:7px 12px;font-size:13px}
#manual-invoice-lines{display:grid;gap:12px}
.manual-invoice-line{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px!important;padding:18px!important;border:1px solid var(--line)!important;border-radius:14px;background:var(--subtle)}
.manual-invoice-line>legend{float:left;grid-column:1/-1;width:100%;padding:0;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.manual-invoice-line>legend+*{clear:both}
.manual-invoice-line>label{grid-column:1/-1}
.manual-invoice-line>.form-split{grid-column:span 4;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.manual-invoice-line>.form-split+label{grid-column:span 2}
.manual-invoice-line>.form-split+label+label{grid-column:1/-1}
.manual-invoice-line>label:has(.line-project-attribution){grid-column:span 2}
.manual-invoice-line>label:has(.line-project-attribution)~label{grid-column:span 4}
.manual-invoice-line .remove-invoice-line{grid-column:1/-1;justify-self:end;color:var(--danger);padding:4px 8px}
.manual-invoice-line .remove-invoice-line:hover{background:var(--danger-soft)}
.manual-invoice-line input,.manual-invoice-line select{background-color:var(--paper)!important}
.modal small.optional{display:block;margin-top:2px;font-size:12px;font-weight:450}
.modal .payment-due{margin:0}
.modal-actions{position:sticky;bottom:-30px;margin:4px -32px -30px!important;padding:16px 32px 20px!important;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--line)}
@media(max-width:640px){
  .manual-invoice-line{grid-template-columns:1fr}
  .manual-invoice-line>*{grid-column:1/-1!important}
  .modal-actions{bottom:-24px;margin:4px -20px -24px!important;padding:14px 20px 18px!important}
}

/* Project detail: "Finish & invoice" sits apart from the everyday actions */
.project-detail-actions{gap:10px;align-items:center}
.project-detail-actions .finish-project,.project-detail-actions [data-invoice-project]{margin-left:auto}

/* Scope / delivery statuses share the invoice pill palette */
.source-pill[data-status="approved"],.source-pill[data-status="delivered"],.source-pill[data-status="completed"],.source-pill[data-status="accepted"],.source-pill[data-status="resolved"]{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.source-pill[data-status="submitted"],.source-pill[data-status="shared"],.source-pill[data-status="in_progress"],.source-pill[data-status="open"]{background:#e9f0fb;border-color:transparent;color:#1f4f8f}
.source-pill[data-status="pending"],.source-pill[data-status="on_hold"],.source-pill[data-status="planned"]{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.source-pill[data-status="rejected"],.source-pill[data-status="declined"]{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
html[data-theme="dark"] .source-pill[data-status="submitted"],html[data-theme="dark"] .source-pill[data-status="shared"],html[data-theme="dark"] .source-pill[data-status="in_progress"],html[data-theme="dark"] .source-pill[data-status="open"]{background:#1b2a3d;color:#9cc1f0}

/* Project cards: keep Edit/Share on one row; client names in tables stay on one line */
.project-card-title>span,.project-card-title>div:last-child{display:flex;gap:6px;flex-shrink:0;align-items:flex-start}
.project-card-title>div:first-child{min-width:0}
.manual-invoice-line>label:has(.line-project-attribution)~label{grid-column:span 2}
html[data-theme="dark"] .content select,html[data-theme="dark"] .modal select,html[data-theme="dark"] .start-form select,html[data-theme="dark"] .task-card select{background-repeat:no-repeat;background-position:right 13px center}
.start-form select,.task-card select{background-repeat:no-repeat;background-position:right 12px center}

/* Links to the downloadable apps (sign-in page and Settings) */
.auth-apps{margin:10px 0 0;font-size:13px;color:var(--muted)}
.auth-apps a{color:var(--accent-ink);font-weight:600}
.apps-links{display:flex;flex-wrap:wrap;gap:10px}