:root{--color-bg:oklch(96% .014 75);--color-surface:oklch(99% .008 75);--color-ink:oklch(26% .02 50);--color-ink-cta:oklch(24% .02 50);--color-text:var(--color-ink);--color-muted:oklch(50% .02 60);--color-border:oklch(86% .016 75);--color-border-subtle:oklch(88% .016 75);--color-weekend:oklch(92% .018 75);--color-accent:#2563eb;--color-success:#16a34a;--color-danger:#dc2626;--overlay:#00000080;--shadow-popover:0 2px 8px #00000026;--shadow-card:0 1px 2px #0000000a, 0 16px 40px #00000012;--font-heading:"Archivo", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Karla", -apple-system, BlinkMacSystemFont, sans-serif;--text-2xs:.65rem;--text-xs:.7rem;--text-sm:.8rem;--text-base:.875rem;--text-lg:1rem;--text-xl:1.5rem;--radius-sm:10px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px}*,:after,:before{box-sizing:border-box}body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);margin:0}.duration,.elapsed,h1,h2,h3,strong{font-family:var(--font-heading);font-weight:700}label{font-size:var(--text-sm);flex-direction:column;gap:.25rem;display:flex}input,select{font:inherit;color:inherit;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);padding:.4rem .5rem}button{font:inherit;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface);color:inherit;cursor:pointer;padding:.5rem .75rem}button:hover:not(:disabled){filter:brightness(.96)}button:disabled{opacity:.6;cursor:default}.btn-primary{background:var(--color-ink-cta);color:#fff;border-color:var(--color-ink-cta)}.btn-pill{border-radius:var(--radius-pill)}.link-button{color:var(--color-accent);text-align:left;font-size:var(--text-base);background:0 0;border:none;padding:0}.error{color:var(--color-danger);font-size:var(--text-sm)}.color-hue-picker{gap:.5rem;display:flex}.color-hue-picker .swatch{outline-offset:2px;cursor:pointer;border:none;border-radius:50%;width:26px;height:26px;padding:0}.page{max-width:1280px;margin:0 auto;padding:2rem 1.5rem}.page-card{background:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}.page-header{border-bottom:1px solid var(--color-border-subtle);color:var(--color-muted);font-size:var(--text-sm);justify-content:space-between;align-items:center;padding:1.1rem 1.75rem;font-weight:500;display:flex}.page-header nav{align-items:center;gap:.6rem;display:flex}.nav-tabs{background:var(--color-border-subtle);border-radius:var(--radius-pill);gap:2px;padding:4px;display:flex}.nav-tab{border-radius:var(--radius-pill);font-size:var(--text-sm);color:var(--color-muted);padding:.5rem 1.1rem;font-weight:600;text-decoration:none}.nav-tab.nav-tab-active{background:var(--color-ink-cta);color:#fff}.page-content{flex-direction:column;gap:1.5rem;padding:1.75rem;display:flex}.toolbar{gap:.5rem;display:flex}.modal-backdrop{background:var(--overlay);z-index:50;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal{background:var(--color-surface);color:var(--color-text);border-radius:var(--radius-lg);flex-direction:column;gap:.75rem;width:min(380px,92vw);max-height:90vh;padding:1.25rem;display:flex;overflow-y:auto}.modal.modal--wide{width:min(560px,96vw)}.modal .time-row{gap:.75rem;display:flex}.modal .time-row label{flex:1}.modal .actions{justify-content:flex-end;gap:.5rem;margin-top:.25rem;display:flex}.login-screen,.setup-screen{justify-content:center;align-items:center;min-height:100vh;padding:1rem;display:flex}.login-card{text-align:center;flex-direction:column;gap:1rem;width:100%;max-width:320px;display:flex}.setup-card{width:100%;max-width:480px}.setup-card code{border-radius:var(--radius-sm);background:#6b728033;padding:.1rem .3rem}.setup-card ol{flex-direction:column;gap:.5rem;padding-left:1.25rem;display:flex}.card-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;display:grid}.project-create-form{border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;display:flex}.project-create-form label{font-size:var(--text-xs)}.project-create-form .error{width:100%}.project-card{border-radius:var(--radius-lg);flex-direction:column;gap:.9rem;padding:1.25rem;display:flex}.project-card .card-header{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.project-card .client{color:var(--color-muted);display:block}.project-card .client,.project-card .edit-button{font-size:var(--text-sm)}.project-card .edit-button{background:var(--color-surface);flex-shrink:0;padding:.35rem .9rem;font-weight:600}.project-card .reserved-line{font-size:var(--text-sm);color:var(--color-muted);flex-direction:column;gap:.4rem;display:flex}.project-card .progress-track{height:6px;overflow:hidden}.project-card .progress-fill,.project-card .progress-track{border-radius:var(--radius-pill)}.project-card .progress-fill{height:100%}.project-card .timer-row{justify-content:space-between;align-items:center;display:flex}.project-card .elapsed{font-variant-numeric:tabular-nums;font-size:var(--text-xl)}.project-card .timer-button{color:#fff;border:none;padding:.6rem 1.4rem}.project-card .timer-button.running{background:var(--color-danger)}.time-entry-list{flex-direction:column;gap:.5rem;display:flex}.time-entry-list .filters{gap:1rem;margin-bottom:.5rem;display:flex}.day-separator{justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem 0 .3rem;display:flex}.day-separator:not(:first-child){border-top:1px solid var(--color-border);margin-top:.5rem}.day-separator .day-label{font-family:var(--font-heading);font-weight:700;font-size:var(--text-lg)}.day-separator .day-totals{font-size:var(--text-sm);color:var(--color-muted);gap:.75rem;display:flex}.day-separator .day-total.billable{color:var(--color-ink);font-weight:600}.time-entry-row{border-bottom:1px solid var(--color-border-subtle);justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 0;display:flex}.time-entry-row .project-line{align-items:center;gap:.4rem;display:flex}.time-entry-row .dot{border-radius:50%;width:.6rem;height:.6rem;display:inline-block}.time-entry-row .source,.time-entry-row .subtask{color:var(--color-muted);font-size:var(--text-sm)}.time-entry-row .billable-times{font-variant-numeric:tabular-nums;align-items:center;gap:.4rem;margin:.15rem 0;display:flex}.time-entry-row .billable-time{font-family:var(--font-heading);font-weight:700;font-size:var(--text-xl)}.time-entry-row .billable-arrow{color:var(--color-muted);font-size:var(--text-base)}.time-entry-row .comment,.time-entry-row .time-line{font-size:var(--text-sm);color:var(--color-muted)}.time-entry-row .comment{font-style:italic}.time-entry-row .right{flex-shrink:0;align-items:center;gap:.4rem;display:flex}.time-entry-row .durations{flex-direction:column;align-items:flex-end;min-width:4.5rem;display:flex}.time-entry-row .duration{font-variant-numeric:tabular-nums;text-align:right}.time-entry-row .duration-billable{font-size:var(--text-xs);color:var(--color-muted);font-variant-numeric:tabular-nums}.gantt-scroll{overflow-x:auto}.gantt-scroll .project-heading{font-weight:700;font-size:var(--text-sm);padding:.4rem .5rem}.gantt-scroll .project-heading .project-heading-label{display:inline-block;position:sticky;left:.5rem}.gantt-sticky-header{z-index:5;background:var(--color-surface);position:sticky;top:0}.period-row{background:var(--color-surface);display:flex}.period-row .row-label{background:var(--color-surface);z-index:6;flex-shrink:0;width:160px;position:sticky;left:0}.period-row .period-track{display:flex}.period-row .period-cell{text-align:left;white-space:nowrap;text-overflow:ellipsis;border-right:1px solid var(--color-border-subtle);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0;padding:.2rem .4rem;overflow:hidden}.period-row.month-row .period-cell{font-family:var(--font-heading);font-weight:700;font-size:var(--text-xs)}.period-row.week-row .period-cell{font-size:var(--text-2xs);color:var(--color-muted)}.header-row{background:var(--color-surface);display:flex}.header-row .row-label{background:var(--color-surface);z-index:6;flex-shrink:0;width:160px;position:sticky;left:0}.header-row .header-track{display:flex}.header-row .day-cell{text-align:center;font-size:var(--text-2xs);border-right:1px solid var(--color-border-subtle);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0;padding:.25rem 0}.header-row .day-cell.weekend{background:var(--color-weekend)}.header-row .day-cell.today{background:oklch(92% .03 80);font-weight:700}.totals-row{border-bottom:1px solid var(--color-border-subtle);display:flex}.totals-row .row-label{width:160px;font-size:var(--text-xs);color:var(--color-muted);background:var(--color-surface);z-index:6;flex-shrink:0;align-items:center;padding:.3rem .5rem;font-weight:600;position:sticky;left:0}.totals-row .row-label,.totals-row .totals-track{display:flex}.totals-row .totals-cell{height:22px;font-size:var(--text-2xs);border-right:1px solid var(--color-border-subtle);flex-shrink:0;justify-content:center;align-items:center;font-weight:600;display:flex}.gantt-row{border-bottom:1px solid var(--color-border-subtle);align-items:stretch;height:40px;display:flex}.gantt-row .row-label{width:160px;font-size:var(--text-sm);background:var(--color-surface);z-index:2;flex-shrink:0;align-items:center;padding:0 .5rem;display:flex;position:sticky;left:0}.gantt-row .row-track{position:relative}.gantt-row .track-grid{display:flex;position:absolute;inset:0}.gantt-row .track-cell{border-right:1px solid var(--color-border-subtle);flex-shrink:0;height:100%}.gantt-row .track-cell.weekend{background:var(--color-weekend)}.gantt-row .no-dates{line-height:40px;font-size:var(--text-sm);color:var(--color-muted);padding:0 .5rem;font-style:italic;display:block}.gantt-bar{cursor:grab;-webkit-user-select:none;user-select:none;border-radius:4px;align-items:stretch;display:flex;position:absolute;top:4px;bottom:4px}.gantt-bar .handle{cursor:ew-resize;flex-shrink:0;width:6px}.gantt-bar .segments{border-radius:2px;flex:1;display:flex}.gantt-bar .bar-error{font-size:var(--text-xs);background:var(--color-danger);color:#fff;border-radius:var(--radius-sm);white-space:nowrap;z-index:10;padding:.1rem .3rem;position:absolute;top:-1.4rem;left:0}.gantt-heatmap-segment{cursor:pointer;border-right:1px solid #fff6;flex-shrink:0;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.gantt-heatmap-segment .hours-label{font-size:var(--text-2xs);font-weight:600}.gantt-heatmap-segment .hours-label.auto{opacity:.8;font-style:italic}.day-popover{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);z-index:1000;width:110px;box-shadow:var(--shadow-popover);flex-direction:column;gap:.3rem;padding:.4rem;display:flex;position:fixed}.day-popover input{width:100%}.day-popover .popover-date{font-size:var(--text-2xs);color:var(--color-muted)}.day-popover .popover-actions{gap:.3rem;display:flex}.day-popover .reset-button{font-size:var(--text-xs)}.project-edit-modal .modal-header{justify-content:space-between;align-items:flex-start;gap:.5rem;display:flex}.project-edit-modal .modal-header h2{margin:0}.project-edit-modal .icon-button{font-size:var(--text-lg);background:0 0;border:none;padding:.1rem .4rem;line-height:1}.project-edit-modal .project-fields{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.project-edit-modal h3{margin:0}.project-edit-modal .total{font-weight:400;font-size:var(--text-sm)}.project-edit-modal .subtasks-header,.project-edit-modal .total{color:var(--color-muted)}.project-edit-modal .subtasks-header{font-size:var(--text-xs);grid-template-columns:1.5fr 1fr 1fr 70px auto auto;gap:.4rem;display:grid}.project-edit-modal .add-subtask{grid-template-columns:1.5fr 1fr 1fr 70px auto;align-items:center;gap:.4rem;display:grid}.project-edit-modal .add-subtask input{font-size:var(--text-sm);padding:.3rem .4rem}.project-edit-modal hr{border:none;border-top:1px solid var(--color-border-subtle);margin:.2rem 0}.subtask-edit-row{border-left:2px solid #0000;grid-template-columns:1.5fr 1fr 1fr 70px auto auto;align-items:center;gap:.4rem;padding:.3rem 0;display:grid}.subtask-edit-row.dirty{border-left-color:var(--color-accent)}.subtask-edit-row input{font-size:var(--text-sm);width:100%}.subtask-edit-row button{font-size:var(--text-xs);padding:.3rem .5rem}.subtask-edit-row .error{grid-column:1/-1;margin:0}
