@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* Edge design system — https://claude.ai/artifact/4UDtxQJWJ8GqMTPrWC6eJu
   Tokens (from tokens.json) and the .e-* component classes. Theme follows Edge's
   html[data-theme] toggle. Edit the design system first, then copy here. */

:root,[data-theme="light"]{--bg-content:#fafafa;--bg-card:#ffffff;--bg-card-hover:#f9fafb;--border-card:#e5e7eb;--border-subtle:#d1d5db;--text-heading:#101828;--text-body:#1a1a1a;--text-muted:#6a7282;--text-subtle:#9ca3af;--bg-topbar:var(--bg-card);--border-topbar:var(--border-card);--text-topbar:#1a1a1a;--bg-input:var(--bg-card);--border-input:var(--border-subtle);--text-input:var(--text-body);--bg-dropdown:var(--bg-card);--border-dropdown:var(--border-card);--bg-dropdown-hover:var(--bg-card-hover);--bg-modal:var(--bg-card);--border-modal:var(--border-card);--primary:#0fa66d;--primary-hover:#0c8a5a;--primary-ink:#0b7a50;--primary-soft:#e7f7f0;--accent:#3ce677;--accent-ink:#0b5e61;--accent-soft:#e8fbef;--ink:#1b1c1d;--on-ink:#ffffff;--sidebar-bg:#1a1a1a;--sidebar-text:rgba(255,255,255,0.6);--sidebar-text-active:#ffffff;--sidebar-item-active:rgba(255,255,255,0.08);--sidebar-item-hover:rgba(255,255,255,0.05);--success-bg:#dcfce7;--success-ink:#166534;--warning-bg:#fef3c7;--warning-ink:#92400e;--danger-bg:#fee2e2;--danger-ink:#991b1b;--danger:#ff5c35;--danger-hover:#e64a24;--info-bg:#e0f2fe;--info-ink:#075985;--neutral-bg:#f3f4f6;--neutral-ink:#4b5563;--toast-bg:#1b1c1d;--overlay:rgba(0,0,0,0.4);--status-ok:#2b8046;--status-watch:#b08300;--status-attn:#d35f1c;--status-red:#c3352c;--status-unknown:#8794a0}
[data-theme="dark"]{--bg-content:#101828;--bg-card:#1e2939;--bg-card-hover:#283548;--border-card:#364153;--border-subtle:#364153;--text-heading:#ffffff;--text-body:#e5e7eb;--text-muted:#99a1af;--text-subtle:#6a7282;--text-topbar:#ffffff;--primary:#0fa66d;--primary-hover:#13c07f;--primary-ink:#0fa66d;--primary-soft:rgba(15,166,109,0.16);--accent:#3ce677;--accent-ink:#7ef0a6;--accent-soft:rgba(60,230,119,0.12);--ink:#3ce677;--on-ink:#1b1c1d;--sidebar-bg:#1a1a1a;--sidebar-text:rgba(255,255,255,0.6);--sidebar-text-active:#ffffff;--sidebar-item-active:rgba(255,255,255,0.08);--sidebar-item-hover:rgba(255,255,255,0.05);--success-bg:rgba(74,222,128,0.18);--success-ink:#86efac;--warning-bg:rgba(251,191,36,0.16);--warning-ink:#fcd34d;--danger-bg:rgba(248,113,113,0.16);--danger-ink:#fca5a5;--danger:#ff5c35;--danger-hover:#ff7656;--info-bg:rgba(56,189,248,0.16);--info-ink:#7dd3fc;--neutral-bg:rgba(156,163,175,0.16);--neutral-ink:#d1d5db;--toast-bg:#1b1c1d;--overlay:rgba(0,0,0,0.6);--status-ok:#5bc27a;--status-watch:#e2b83a;--status-attn:#f08a4b;--status-red:#f2675c;--status-unknown:#8794a0;color-scheme:dark}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-pill:999px;--shadow-menu:0 12px 30px rgba(0,0,0,0.12);--shadow-toast:0 8px 24px rgba(0,0,0,0.18);--shadow-modal:0 20px 60px rgba(0,0,0,0.18);--sidebar-width:280px;--sidebar-width-collapsed:70px;--topbar-height:60px;--control-height:36px;--drawer-width:580px;--font-sans:"DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace}

/* Edge components. Every value comes from tokens.css; no literal colours except white on fills. */
.e-root{font-family:var(--font-sans);font-size:14px;line-height:20px;color:var(--text-body);background:var(--bg-content);-webkit-font-smoothing:antialiased}
.e-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.e-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.e-stack{display:flex;flex-direction:column;gap:var(--space-3)}

/* Buttons */
/* Default .e-btn is the secondary button: primary-green outline, transparent inside, primary-green label. */
.e-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--control-height);padding:0 14px;border-radius:var(--radius-md);border:1px solid var(--primary);background:transparent;color:var(--primary);font:600 14px/20px var(--font-sans);cursor:pointer;text-decoration:none;white-space:nowrap}
.e-btn:hover{border-color:var(--primary-hover);color:var(--primary-hover);background:var(--primary-soft)}
.e-btn--neutral{border-color:var(--border-subtle);background:var(--bg-card);color:var(--text-body)}
.e-btn--neutral:hover{border-color:var(--border-subtle);background:var(--bg-card-hover);color:var(--text-body)}
.e-btn:focus-visible,.e-input:focus-visible,.e-tab:focus-visible,.e-seg button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.e-btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.e-btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.e-btn--danger{background:var(--danger);border-color:var(--danger);color:#fff}
.e-btn--danger:hover{background:var(--danger-hover);border-color:var(--danger-hover);color:#fff}
.e-btn--dark{background:var(--sidebar-bg);border-color:var(--sidebar-bg);color:#fff}
.e-btn--dark:hover{background:var(--sidebar-bg);border-color:var(--sidebar-bg);color:#fff;opacity:.9}
.e-btn--ghost{border-color:transparent;background:transparent;color:var(--text-body)}
.e-btn--ghost:hover{border-color:transparent;background:var(--bg-card-hover);color:var(--text-heading)}
.e-btn--danger-text{border-color:transparent;background:transparent;color:var(--danger)}
.e-btn--danger-text:hover{border-color:transparent;background:var(--danger-bg);color:var(--danger-hover)}
.e-btn--icon{width:var(--control-height);padding:0}
.e-btn[disabled]{opacity:.5;cursor:not-allowed}
.e-split{display:inline-flex}.e-split .e-btn:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.e-split .e-btn:last-child{border-left:0;border-radius:0 var(--radius-md) var(--radius-md) 0;padding:0 10px}

/* Pills */
.e-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px 9px;border-radius:var(--radius-pill);border:1px solid transparent;font:600 11px/16px var(--font-sans);background:var(--neutral-bg);color:var(--neutral-ink)}
.e-pill--accent{background:var(--accent-soft);color:var(--accent-ink)}
.e-pill--success{background:var(--success-bg);color:var(--success-ink)}
.e-pill--warning{background:var(--warning-bg);color:var(--warning-ink)}
.e-pill--danger{background:var(--danger-bg);color:var(--danger-ink)}
.e-pill--info{background:var(--info-bg);color:var(--info-ink)}
.e-pill--suggested{border-style:dashed;border-color:currentColor}
.e-pill--new{background:var(--accent);color:#1b1c1d}
.e-dot{width:8px;height:8px;border-radius:50%;flex:none;background:currentColor}

/* Tabs and segmented control */
.e-tabs{display:flex;gap:var(--space-1);border-bottom:1px solid var(--border-card);overflow-x:auto}
.e-tab{padding:8px 12px;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;font:600 14px/20px var(--font-sans);color:var(--text-muted);cursor:pointer;white-space:nowrap;text-decoration:none}
.e-tab[aria-selected="true"]{color:var(--text-heading);border-bottom-color:var(--primary)}
.e-tab .e-count{font:500 13px var(--font-mono);opacity:.75;margin-left:6px}
.e-seg{display:inline-flex;border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden;background:var(--bg-card)}
.e-seg button,.e-seg a{border:0;border-right:1px solid var(--border-subtle);background:none;padding:7px 14px;font:600 14px/20px var(--font-sans);color:var(--text-body);cursor:pointer;text-decoration:none}
.e-seg :last-child{border-right:0}
.e-seg [aria-pressed="true"],.e-seg [aria-selected="true"]{background:var(--ink);color:var(--on-ink)}

/* Page header */
.e-header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4)}
.e-eyebrow{margin:0 0 2px;font:700 11px/16px var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.e-title{margin:0;font:700 24px/32px var(--font-sans);color:var(--text-heading)}
.e-subtitle{margin:4px 0 0;font-size:14px;color:var(--text-muted)}

/* Cards and stat tiles */
.e-card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--radius-lg)}
.e-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:14px var(--space-4);border-bottom:1px solid var(--border-card)}
.e-card__title{margin:0;font:700 15px/22px var(--font-sans);color:var(--text-heading)}
.e-card__body{padding:14px var(--space-4)}
.e-stat__label{font-size:13px;color:var(--text-muted)}
.e-stat__value{font:600 28px/34px var(--font-mono);color:var(--text-heading);font-variant-numeric:tabular-nums}

/* Forms */
.e-field{display:flex;flex-direction:column;gap:6px}
.e-label{font:600 13px/18px var(--font-sans);color:var(--text-body)}
.e-input,.e-select{height:var(--control-height);padding:0 12px;border:1px solid var(--border-input);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text-input);font:14px var(--font-sans);box-sizing:border-box}
.e-input::placeholder{color:var(--text-subtle)}
textarea.e-input{height:auto;min-height:72px;padding:10px 12px;resize:vertical}
.e-check{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.e-check input{width:18px;height:18px;accent-color:var(--primary)}

/* Tables */
.e-table-wrap{overflow-x:auto;border:1px solid var(--border-card);border-radius:var(--radius-lg);background:var(--bg-card)}
.e-table{width:100%;border-collapse:collapse;font-size:13px}
.e-table th{padding:9px 12px;text-align:left;font:600 11px/16px var(--font-sans);letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);background:var(--bg-card-hover);border-bottom:1px solid var(--border-card)}
.e-table td{padding:10px 12px;border-bottom:1px solid var(--border-card);color:var(--text-body)}
.e-table tr:last-child td{border-bottom:0}
.e-table tbody tr:hover td{background:var(--bg-card-hover)}
.e-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* Alerts, toasts, empty states */
.e-alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-md);font-size:14px}
.e-alert--info{background:var(--primary-soft);color:var(--text-heading)}
.e-alert--success{background:var(--success-bg);color:var(--success-ink)}
.e-alert--warning{background:var(--warning-bg);color:var(--warning-ink)}
.e-alert--danger{background:var(--danger-bg);color:var(--danger-ink)}
.e-toast{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--radius-lg);background:var(--toast-bg);color:#fff;font-size:14px;box-shadow:var(--shadow-toast)}
.e-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:48px 16px;border:2px dashed var(--border-card);border-radius:var(--radius-lg);color:var(--text-muted)}
.e-empty h2{margin:0;font:700 17px/24px var(--font-sans);color:var(--text-heading)}

/* Menus, modals */
.e-menu{background:var(--bg-dropdown);border:1px solid var(--border-dropdown);border-radius:var(--radius-lg);box-shadow:var(--shadow-menu);padding:6px;min-width:220px}
.e-menu__item{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;border-radius:var(--radius-md);font-size:14px;color:var(--text-body)}
.e-menu__item:hover,.e-menu__item[aria-selected="true"]{background:var(--bg-dropdown-hover)}
.e-menu__group{padding:10px 12px 4px;font:700 13px var(--font-sans);color:var(--text-heading)}
.e-modal{background:var(--bg-modal);border:1px solid var(--border-modal);border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);max-width:560px;width:100%}
.e-modal__head{padding:14px 20px;border-bottom:1px solid var(--border-card);font:700 15px var(--font-sans);color:var(--text-heading)}
.e-modal__body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.e-modal__foot{padding:12px 20px;border-top:1px solid var(--border-card);display:flex;gap:8px;align-items:center}

/* Shell */
.e-sidebar{width:var(--sidebar-width);background:var(--sidebar-bg);padding:12px 4px;box-sizing:border-box;font-family:var(--font-sans)}
.e-sidebar__brand{display:flex;align-items:center;min-height:60px;padding:0 20px;border-bottom:1px solid rgba(255,255,255,.08);margin:-12px -4px 8px}
.e-sidebar__item{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 4px;border-radius:10px;font:500 14px/20px var(--font-sans);color:var(--sidebar-text);text-decoration:none}
.e-sidebar__item:hover{background:var(--sidebar-item-hover);color:var(--sidebar-text-active)}
.e-sidebar__item[aria-current="page"]{background:var(--sidebar-item-active);color:var(--sidebar-text-active)}
.e-sidebar__sub{margin-left:16px;padding-left:13px;border-left:1px solid rgba(255,255,255,.1)}
.e-sidebar__sub .e-sidebar__item{padding:6px 10px;font-size:13px;border-radius:var(--radius-md)}
.e-topbar{height:var(--topbar-height);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;background:var(--bg-topbar);border-bottom:1px solid var(--border-topbar);color:var(--text-topbar)}
.e-avatar{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--neutral-bg);color:var(--neutral-ink);font:600 12px var(--font-sans)}

/* Timesheet pieces */
.e-timer{display:inline-flex;align-items:center;gap:10px;height:var(--control-height);padding:0 14px 0 12px;border-radius:var(--radius-pill);background:var(--sidebar-bg);color:#fff;font-size:13px;text-decoration:none}
.e-timer .e-dot{color:var(--accent)}
.e-timer__time{font:600 13px var(--font-mono)}
.e-timer__what{color:rgba(255,255,255,.7);max-width:200px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.e-timer--idle{background:var(--accent);color:#1b1c1d;font-weight:600}
.e-sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.e-sync--ok .e-dot{color:var(--success-ink)}
.e-sync--saving .e-dot{color:var(--warning-ink)}
.e-sync--failed{color:var(--danger-ink)}.e-sync--failed .e-dot{color:var(--danger-ink)}
.e-sync--changed{color:var(--primary-ink)}.e-sync--changed .e-dot{color:var(--primary-ink)}