/* application.css */
:where(*) {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family:
    "IBM Plex Sans",
    system-ui,
    sans-serif;
  background: var(--page);
  color: var(--ink);
}
#app {
  padding: 0;
}
.auth-screen {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--page);
}
.auth-header {
  min-height: 72px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--auth-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.auth-screen .brand {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.auth-screen .mono {
  font-family:
    "IBM Plex Mono",
    ui-monospace,
    monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}
.auth-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.auth-card {
  width: 100%;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--auth-line);
  border-radius: 3px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-screen h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.auth-screen p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-muted);
}
.auth-screen .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--auth-line);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
}
.auth-screen .primary {
  background: var(--ink);
  color: var(--surface);
  border-color: var(--ink);
  font-weight: 500;
}
.auth-screen .actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-screen .saved {
  padding: 12px;
  border: 1px solid var(--auth-line);
  border-radius: 3px;
  background: var(--auth-raised);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.auth-screen .alert {
  padding: 12px;
  border-left: 3px solid var(--auth-accent);
  background: var(--auth-alert-bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
.auth-screen .facts {
  margin: 0;
  display: grid;
  gap: 12px;
}
.auth-screen .facts div {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--auth-line);
}
.auth-screen dt {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
.auth-screen dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.auth-screen .settings {
  display: grid;
  gap: 12px;
}
.auth-screen label {
  font-size: 14px;
  font-weight: 500;
}
.auth-screen select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--auth-line);
  border-radius: 3px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--surface);
}
.auth-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--auth-line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-muted);
}
@media (min-width: 900px) {
  .auth-header {
    padding: 12px 36px;
  }
  .auth-main {
    justify-content: center;
  }
  .auth-card {
    width: 640px;
    padding: 28px;
  }
  .auth-screen .actions {
    flex-direction: row;
  }
  .auth-screen .facts div {
    grid-template-columns: 240px 1fr;
  }
  .auth-footer {
    padding: 12px 36px;
  }
}

/* src/auth/tokens.css */
:root {
  --auth-raised: #fbfaf8;
  --auth-line: var(--line-soft);
  --auth-accent: var(--accent);
  --auth-alert-bg: #fff1e9;
  color-scheme: light;
}
:root[data-theme=dark] {
  --auth-raised: var(--raised);
  --auth-line: var(--line-strong);
  --auth-accent: #ef9f7c;
  --auth-alert-bg: #30221a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not([data-theme=dark]) {
    --auth-raised: var(--raised);
    --auth-line: var(--line-strong);
    --auth-accent: #ef9f7c;
    --auth-alert-bg: #30221a;
    color-scheme: dark;
  }
}

/* src/monitoring/work-state.css */
.work-monitoring {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  padding: 24px;
  display: grid;
  gap: 24px;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.work-monitoring h1,
.work-monitoring h2,
.work-monitoring p {
  margin: 0;
}
.work-monitoring h1 {
  font-size: 26px;
  line-height: 1.25;
}
.work-monitoring h2 {
  font-size: 19px;
  line-height: 1.4;
}
.work-monitoring p {
  line-height: 1.55;
}
.work-monitoring header,
.work-monitoring section {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.work-monitoring .work-meta {
  color: var(--ink-muted);
  font-size: 14px;
}
.work-monitoring .work-stale {
  border-left: 3px solid var(--auth-accent);
  padding-left: 12px;
}
.work-monitoring .work-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.work-monitoring .work-counts p {
  display: grid;
  padding: 12px 8px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}
.work-monitoring .work-counts strong {
  font-size: 24px;
}
.work-monitoring .work-hours {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2px;
}
.work-monitoring .work-hours li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  height: 132px;
  font-size: 11px;
}
.work-monitoring .work-hours li > span:last-child {
  white-space: nowrap;
  font-size: 10px;
}
.work-monitoring .work-bar {
  width: 100%;
  min-height: 1px;
  background: var(--ink-muted);
}
.work-monitoring .work-range {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-muted);
}
.work-monitoring .work-filters {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.work-monitoring label {
  display: grid;
  gap: 6px;
  font-size: 14px;
}
.work-monitoring input,
.work-monitoring select,
.work-monitoring button,
.work-monitoring .work-nav a {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.work-monitoring input,
.work-monitoring select {
  width: 100%;
  min-width: 0;
}
.work-monitoring button {
  cursor: pointer;
}
.work-monitoring button:disabled {
  cursor: wait;
}
.work-monitoring :focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.work-monitoring .work-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.work-monitoring a {
  color: var(--ink);
  text-underline-offset: 3px;
}
.work-monitoring .work-tasks {
  display: grid;
  gap: 16px;
}
.work-monitoring article {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  min-width: 0;
}
.work-monitoring .work-tasks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.work-monitoring [role=alert] {
  padding: 12px;
  border-left: 3px solid var(--auth-accent);
}
.dashboard-main {
  min-height: 0;
  overflow-y: auto;
}
@media (min-width: 900px) {
  .work-monitoring {
    padding: 32px;
  }
  .work-monitoring .work-hours {
    grid-template-columns: repeat(24, minmax(0, 1fr));
  }
  .work-monitoring .work-filters {
    grid-template-columns: 1fr 1fr;
  }
  .work-monitoring .work-filters label:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* src/notifications/tokens.css */
:root {
  --page:#f7f5f2;
  --surface:#ffffff;
  --raised:#f4f1ec;
  --line-soft:#e3ded7;
  --line-strong:#ddd6cd;
  --ink:#231f1c;
  --ink-secondary:#4a433d;
  --ink-muted:#6b635c;
  --ink-dim:#706759;
  --panel-surface:#231f1c;
  --panel-raised:#35302b;
  --panel-line:#35302b;
  --panel-ink:#efe9e1;
  --panel-ink-label:#c3bab0;
  --panel-ink-faint:#9b9186;
  --panel-ink-clock:#b0a69b;
  --panel-ink-chip:#d5cdc3;
  --panel-ink-dim:#b3a99a;
  --accent:#b4451f;
  --hit:#f0ece6;
}
:root[data-theme=dark] {
  --page:#17150f;
  --surface:#201d17;
  --raised:#262119;
  --line-soft:#2c2822;
  --line-strong:#35302a;
  --ink:#eae4da;
  --ink-secondary:#cfc6b8;
  --ink-muted:#b0a696;
  --ink-dim:#a29889;
  --panel-surface:#0f0d09;
  --panel-raised:#2a251d;
  --panel-line:#2a251d;
  --panel-ink:#eae4da;
  --panel-ink-label:#c3bab0;
  --panel-ink-faint:#9b9186;
  --panel-ink-clock:#b0a69b;
  --panel-ink-chip:#d5cdc3;
  --panel-ink-dim:#b3a99a;
  --accent:#b4451f;
  --hit:#242017;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]):not([data-theme=dark]) {
    --page:#17150f;
    --surface:#201d17;
    --raised:#262119;
    --line-soft:#2c2822;
    --line-strong:#35302a;
    --ink:#eae4da;
    --ink-secondary:#cfc6b8;
    --ink-muted:#b0a696;
    --ink-dim:#a29889;
    --panel-surface:#0f0d09;
    --panel-raised:#2a251d;
    --panel-line:#2a251d;
    --panel-ink:#eae4da;
    --panel-ink-label:#c3bab0;
    --panel-ink-faint:#9b9186;
    --panel-ink-clock:#b0a69b;
    --panel-ink-chip:#d5cdc3;
    --panel-ink-dim:#b3a99a;
    --accent:#b4451f;
    --hit:#242017;
  }
}

/* src/backlog/tokens.css */
.backlog-view {
  --backlog-page: #f7f5f2;
  --backlog-surface: #ffffff;
  --backlog-line-soft: #e3ded7;
  --backlog-line-strong: #ddd6cd;
  --backlog-ink: #231f1c;
  --backlog-secondary: #4a433d;
  --backlog-muted: #6b635c;
  --backlog-accent: #b4451f;
}
.backlog-view[data-theme=light] {
  --backlog-page: #f7f5f2;
  --backlog-surface: #ffffff;
  --backlog-line-soft: #e3ded7;
  --backlog-line-strong: #ddd6cd;
  --backlog-ink: #231f1c;
  --backlog-secondary: #4a433d;
  --backlog-muted: #6b635c;
  --backlog-accent: #b4451f;
}
.backlog-view[data-theme=dark] {
  --backlog-page: #17150f;
  --backlog-surface: #201d17;
  --backlog-line-soft: #2c2822;
  --backlog-line-strong: #35302a;
  --backlog-ink: #eae4da;
  --backlog-secondary: #cfc6b8;
  --backlog-muted: #b0a696;
  --backlog-accent: #f2a080;
}
@media (prefers-color-scheme: dark) {
  .backlog-view[data-theme=system] {
    --backlog-page: #17150f;
    --backlog-surface: #201d17;
    --backlog-line-soft: #2c2822;
    --backlog-line-strong: #35302a;
    --backlog-ink: #eae4da;
    --backlog-secondary: #cfc6b8;
    --backlog-muted: #b0a696;
    --backlog-accent: #f2a080;
  }
}

/* src/tasks/feedback-author-view.css */
.feedback-task-view {
  background: var(--backlog-page);
  color: var(--backlog-ink);
  font: 16px/1.5 system-ui;
  min-height: 100vh;
  overflow-wrap: anywhere;
}
.feedback-task-view * {
  box-sizing: border-box;
}
.feedback-task-view main {
  width: 100%;
  min-width: 0;
  padding: 16px;
}
.feedback-task-view header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.feedback-task-view h1 {
  font-size: 28px;
}
.feedback-task-view h2 {
  font-size: 20px;
}
.feedback-task-view section {
  background: var(--backlog-surface);
  border: 1px solid var(--backlog-line-strong);
  padding: 20px;
  margin-block: 20px;
}
.feedback-task-view dl {
  margin: 0;
}
.feedback-task-view dl div {
  padding-block: 8px;
}
.feedback-task-view dt,
.feedback-task-view p {
  color: var(--backlog-muted);
}
.feedback-task-view dd {
  margin: 0;
}
.feedback-task-view a,
.feedback-task-view button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--backlog-accent);
}
.feedback-task-view button {
  background: var(--backlog-surface);
  border: 1px solid var(--backlog-line-strong);
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
}
.feedback-task-view :focus-visible {
  outline: 2px solid var(--backlog-accent);
  outline-offset: 3px;
}
@media (min-width: 900px) {
  .feedback-task-view main {
    width: 760px;
    margin: auto;
    padding: 32px;
  }
}

/* src/notifications/notification-history.css */
.notification-history {
  font-family:
    "IBM Plex Sans",
    system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--page);
  padding: 20px 16px;
  box-sizing: border-box;
  min-width: 0;
}
.notification-history h1 {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.2;
}
.notification-list {
  margin: 16px 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}
.notification-card {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  padding: 16px;
  min-width: 0;
  display: grid;
  gap: 12px;
}
.notification-card h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.4;
}
.notification-facts {
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-secondary);
  overflow-wrap: anywhere;
}
.notification-facts div {
  display: grid;
  gap: 4px;
}
.notification-facts dd {
  margin: 0;
}
.notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.notification-actions button,
.notification-actions a,
.notification-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.notification-status,
.notification-count {
  font-size: 13px;
  color: var(--ink-secondary);
}
.notification-count {
  display: flex;
  gap: 8px;
}
.notification-error {
  border: 1px solid var(--accent);
  background: var(--surface);
  padding: 12px;
  color: var(--ink);
}
@media (min-width: 900px) {
  .notification-history {
    padding: 30px 36px;
  }
  .notification-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}