@layer reset, base, components, pages;

@view-transition { navigation: auto; }

:root {
  color-scheme: light dark;
  /* Greyscale tokens, defined once for both schemes. */
  --bg: light-dark(#fafafa, #161617);
  --surface: light-dark(#ffffff, #1e1e20);
  --surface-2: light-dark(#f2f2f3, #262629);
  --border: light-dark(#e3e3e6, #2f2f33);
  --border-strong: light-dark(#c9c9ce, #45454b);
  --text: light-dark(#18181a, #ececee);
  --text-muted: light-dark(#6b6b72, #9a9aa1);
  --text-faint: light-dark(#9a9aa1, #6b6b72);
  /* The one exception to greyscale: errors and destructive actions. */
  --danger: light-dark(#a3342b, #e07a70);
  --danger-bg: light-dark(#fbeeec, #3a2220);

  --font: system-ui, sans-serif;
  --mono: ui-monospace, monospace;
  --radius: 8px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 160ms;
  accent-color: var(--text);
  interpolate-size: allow-keywords;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg { display: block; max-width: 100%; }
  input, button, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
}

@layer base {
  body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { line-height: 1.25; text-wrap: balance; font-weight: 600; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.125rem; }
  h3 { font-size: 1rem; }
  a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
  a:hover { text-decoration-color: currentColor; }
  :focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }
  .num, time, td.num, .duration { font-variant-numeric: tabular-nums; }
  .muted { color: var(--text-muted); }
  .faint { color: var(--text-faint); }
  .small { font-size: .875rem; }
  .mono { font-family: var(--mono); font-size: .875em; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }
}

@layer components {
  /* Layout shell */
  .shell-header {
    view-transition-name: header;
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-3) var(--space-5);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
  }
  .brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; text-decoration: none; }
  .brand svg { width: 22px; height: 22px; }
  .nav { display: flex; gap: var(--space-1); flex: 1; overflow-x: auto; }
  .nav a { padding: var(--space-1) var(--space-3); border-radius: 999px; text-decoration: none; color: var(--text-muted); white-space: nowrap; }
  .nav a:hover { color: var(--text); }
  .nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); font-weight: 500; }
  .user-menu { display: flex; align-items: center; gap: var(--space-3); color: var(--text-muted); margin-left: auto; }
  .user-menu > a { text-decoration: none; }
  main { max-width: 1040px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-7); }
  main.narrow { max-width: 560px; }
  .page-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
  .page-head h1 { flex: 1; }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 36px; padding: 0 var(--space-4);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    background: var(--surface); color: var(--text); text-decoration: none; font-weight: 500;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  .btn:hover { background: var(--surface-2); }
  .btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
  .btn.primary:hover { background: color-mix(in srgb, var(--text) 85%, var(--bg)); }
  .btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
  .btn.ghost { border-color: transparent; background: transparent; }
  .btn.small { min-height: 28px; padding: 0 var(--space-3); font-size: .875rem; }
  .btn[disabled] { opacity: .5; cursor: not-allowed; }
  .icon-btn {
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface);
    transition: background var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .icon-btn:hover { background: var(--surface-2); }
  .icon-btn:active { transform: scale(.94); }
  .icon-btn svg { width: 14px; height: 14px; fill: currentColor; }
  .icon-btn.running { background: var(--text); color: var(--bg); border-color: var(--text); }
  form.inline { display: inline; }

  /* Forms */
  .field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
  .field > span, .field > label { font-size: .875rem; font-weight: 500; }
  .field .hint { font-size: .8125rem; color: var(--text-muted); }
  input:not([type="checkbox"], [type="radio"]), select, textarea {
    width: 100%; min-height: 38px; padding: var(--space-2) var(--space-3);
    background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  }
  textarea { min-height: 72px; resize: vertical; field-sizing: content; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--text); outline-offset: 0; border-color: var(--text); }
  .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
  .actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }
  .actions .spacer { flex: 1; }
  .check { display: flex; align-items: center; gap: var(--space-2); }

  /* Messages */
  .flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); margin-bottom: var(--space-5); }
  .flash.error, .error-text { color: var(--danger); }
  .flash.error { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
  .field .error-text { font-size: .8125rem; }

  /* Cards and tables */
  .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-5); }
  .card + .card { margin-top: var(--space-4); }
  /* A row of equal-width summary boxes. */
  .stats { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
  .stats > .card { flex: 1 1 0; min-width: 10rem; margin: 0; }
  .stats .label { font-size: .875rem; color: var(--text-muted); }
  .stats .value { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
  .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
  table { width: 100%; border-collapse: collapse; }
  .table-wrap > table { min-width: 34rem; }
  .table-wrap td.label { min-width: 14rem; }
  /* Columns as narrow as their content (dates). */
  td.shrink, th.shrink { width: 1%; white-space: nowrap; }
  th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; }
  tr:last-child td { border-bottom: 0; }
  th { font-size: .8125rem; font-weight: 500; color: var(--text-muted); }
  td.num, th.num { text-align: right; white-space: nowrap; }
  tfoot td { font-weight: 600; border-top: 1px solid var(--border-strong); }
  .badge { display: inline-block; padding: 1px var(--space-2); border-radius: 999px; font-size: .75rem; border: 1px solid var(--border-strong); color: var(--text-muted); white-space: nowrap; }
  .badge.strong { color: var(--text); border-color: var(--text); }
  .meter { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; min-width: 80px; }
  .meter > span { display: block; height: 100%; background: var(--text-muted); }
  .meter.over > span { background: var(--danger); }
  .empty { text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted); }
  .empty blockquote { margin: 0 auto var(--space-5); max-width: 36ch; font-size: 1.0625rem; color: var(--text); text-wrap: balance; }
  .empty cite { display: block; margin-top: var(--space-2); font-style: normal; color: var(--text-muted); font-size: .875rem; }

  /* Dialogs */
  dialog {
    width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: var(--space-5);
    border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text);
    opacity: 0; transform: translateY(8px) scale(.98);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease), overlay var(--fast) allow-discrete, display var(--fast) allow-discrete;
  }
  dialog[open] { opacity: 1; transform: none; }
  @starting-style { dialog[open] { opacity: 0; transform: translateY(8px) scale(.98); } }
  dialog::backdrop { background: rgb(0 0 0 / 0); transition: background var(--fast) var(--ease), overlay var(--fast) allow-discrete, display var(--fast) allow-discrete; }
  dialog[open]::backdrop { background: rgb(0 0 0 / .35); }
  @starting-style { dialog[open]::backdrop { background: rgb(0 0 0 / 0); } }
  dialog h2 { margin-bottom: var(--space-4); }

  /* Toast */
  .toast {
    position: fixed; inset: auto var(--space-5) var(--space-5) auto; z-index: 50;
    padding: var(--space-2) var(--space-4); border-radius: 999px; background: var(--text); color: var(--bg); font-size: .875rem;
    transition: opacity 400ms var(--ease) 1.6s; opacity: 1;
  }
  @starting-style { .toast { opacity: 0; } }
  .toast.done { opacity: 0; }
}

@layer pages {
  /* Timesheet day view */
  .day-head { view-transition-name: day-head; display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
  .day-head h1 { flex: 1; }
  .week-strip {
    view-transition-name: week-strip;
    display: grid; grid-template-columns: auto repeat(7, 1fr) auto; align-items: stretch; gap: var(--space-1);
    margin-bottom: var(--space-5); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  }
  .week-strip a { display: grid; place-items: center; gap: 2px; padding: var(--space-2) 0; border-radius: var(--radius); text-decoration: none; color: var(--text-muted); }
  .week-strip a:hover { background: var(--surface-2); color: var(--text); }
  .week-strip a[aria-current="date"] { background: var(--text); color: var(--bg); }
  .week-strip .dow { font-size: .8125rem; }
  .week-strip .tot { font-size: .875rem; font-variant-numeric: tabular-nums; }
  .week-strip .nav-arrow { padding: 0 var(--space-3); }
  .week-strip .week-total { display: grid; place-items: center; padding: 0 var(--space-3); color: var(--text-muted); font-size: .8125rem; text-align: center; }

  .entries { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
  .entry {
    display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); align-items: center;
    padding: var(--space-4); border-bottom: 1px solid var(--border);
    transition: opacity var(--fast) var(--ease), height var(--fast) var(--ease);
  }
  @starting-style { .entry { opacity: 0; } }
  .entry:last-child { border-bottom: 0; }
  .entry .what { min-width: 0; }
  .entry .project { font-weight: 500; }
  .entry .client, .entry .task { color: var(--text-muted); }
  .entry .notes { margin-top: 2px; color: var(--text-muted); overflow-wrap: anywhere; }
  .entry .duration { font-size: 1.25rem; min-width: 4ch; text-align: right; }
  .entry.running .duration { font-weight: 700; }
  .entry.running { background: var(--surface-2); }
  .entry .locked { font-size: .75rem; }
  .day-total { display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--text-muted); }
  .day-total strong { color: var(--text); font-variant-numeric: tabular-nums; }

  .week-grid td.num a { text-decoration: none; }
  .week-grid td.cell { padding: var(--space-2) var(--space-1); text-align: right; }
  .week-grid td.cell input { min-height: 34px; width: 100%; min-width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; padding: var(--space-1) var(--space-2); }
  .week-grid .readonly { display: block; padding: var(--space-2); text-decoration: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .week-grid .readonly:hover { color: var(--text); }
  .week-add { margin-top: var(--space-5); }
  .week-add thresh-project-task { display: contents; }
  .person-picker select { min-height: 32px; width: auto; padding: var(--space-1) var(--space-3); }
  .week-grid td.today, .week-grid th.today { background: var(--surface-2); }

  .login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); margin: var(--space-7) 0 var(--space-6); }
  .login-brand svg { width: 48px; height: 48px; }
  .codes { columns: 2; font-family: var(--mono); padding: var(--space-4); background: var(--surface-2); border-radius: var(--radius); }
  .secret { font-family: var(--mono); word-break: break-all; padding: var(--space-3); background: var(--surface-2); border-radius: var(--radius); user-select: all; }

  .invoice-lines td.desc { min-width: 320px; }
  .proposed { margin-bottom: var(--space-5); }
  .proposed h2 { display: flex; gap: var(--space-3); align-items: baseline; margin-bottom: var(--space-3); }
}

@media (max-width: 640px) {
  .shell-header { flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3); }
  .nav { order: 3; flex: 1 0 100%; }
  main { padding: var(--space-5) var(--space-3) var(--space-6); }
  .entry { grid-template-columns: 1fr auto; }
  .entry .entry-actions { grid-column: 1 / -1; justify-self: start; }
  .week-strip { grid-template-columns: repeat(7, 1fr); }
  .week-strip .nav-arrow, .week-strip .week-total { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after, ::backdrop { transition: none !important; animation: none !important; }
}