:root {
  --rasci-border: #d0d7de;
  --rasci-bg-corner: #f6f8fa;
  --rasci-bg-header: #eef2f6;
  --rasci-bg-task: #ffffff;
  --rasci-text-primary: #24292f;
  --rasci-text-muted: #8c959f;
  --rasci-text-subtle: #57606a;
  --rasci-error: #cf222e;

  --rasci-r-bg: #fff8c5;
  --rasci-r-fg: #7d4e00;
  --rasci-a-bg: #ffebe9;
  --rasci-a-fg: #953800;
  --rasci-s-bg: #dafbe1;
  --rasci-s-fg: #116329;
  --rasci-c-bg: #ddf4ff;
  --rasci-c-fg: #0a3069;
  --rasci-i-bg: #f6f8fa;
  --rasci-i-fg: #57606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rasci-border: #3d444d;
    --rasci-bg-corner: #161b22;
    --rasci-bg-header: #1f2630;
    --rasci-bg-task: #0d1117;
    --rasci-text-primary: #e6edf3;
    --rasci-text-muted: #9da7b3;
    --rasci-text-subtle: #b1bac4;
    --rasci-error: #ff7b72;

    --rasci-r-bg: #4f3b00;
    --rasci-r-fg: #f2cc60;
    --rasci-a-bg: #5a1e17;
    --rasci-a-fg: #ffb3a7;
    --rasci-s-bg: #0f3a20;
    --rasci-s-fg: #7ee787;
    --rasci-c-bg: #0c2d4a;
    --rasci-c-fg: #79c0ff;
    --rasci-i-bg: #21262d;
    --rasci-i-fg: #c9d1d9;
  }
}

.rasci-wrapper {
  overflow-x: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.925em;
  color-scheme: light dark;
}

.rasci-table {
  border-collapse: collapse;
  inline-size: 100%;
  background: var(--rasci-bg-task);
  color: var(--rasci-text-primary);
}

.rasci-table th,
.rasci-table td {
  border: 1px solid var(--rasci-border);
  padding: 0.5em 1em;
  text-align: center;
}

.rasci-task-header,
.rasci-task-label {
  text-align: left;
}

.rasci-corner {
  background: var(--rasci-bg-corner);
}

.rasci-group-header {
  background: var(--rasci-bg-header);
  font-weight: 600;
  font-size: 0.875em;
  color: var(--rasci-text-subtle);
}

.rasci-role-header {
  background: var(--rasci-bg-corner);
  font-weight: 600;
  color: var(--rasci-text-primary);
}

.rasci-task-label {
  background: var(--rasci-bg-task);
  color: var(--rasci-text-primary);
  white-space: normal;
  line-height: 1.35;
}

.rasci-task-main {
  font-weight: 500;
}

.rasci-task-details {
  margin-block-start: 0.25em;
}

.rasci-task-details summary {
  cursor: pointer;
}

.rasci-task-desc {
  margin-block-start: 0.125em;
  font-size: 0.875em;
  color: var(--rasci-text-muted);
}

.rasci-phase-header {
  background: var(--rasci-bg-header);
  font-weight: 600;
  text-align: left;
  color: var(--rasci-text-primary);
  padding: 0.25em 0.625em;
}

.rasci-cell {
  font-weight: 500;
  font-size: 0.875em;
}

.rasci-empty {
  color: var(--rasci-text-muted);
}

.rasci-attr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 1.9em;
  min-inline-size: 1.9em;
  margin: 0 .08em;
  border-radius: 100em;
  border: 1px solid transparent;
  box-sizing: border-box;
  line-height: 1;
  padding: 0.5em;
}

.rasci-R {
  background: var(--rasci-r-bg);
  color: var(--rasci-r-fg);
  border-color: var(--rasci-r-fg);
}

.rasci-A {
  background: var(--rasci-a-bg);
  color: var(--rasci-a-fg);
  border-color: var(--rasci-a-fg);
}

.rasci-S {
  background: var(--rasci-s-bg);
  color: var(--rasci-s-fg);
  border-color: var(--rasci-s-fg);
}

.rasci-C {
  background: var(--rasci-c-bg);
  color: var(--rasci-c-fg);
  border-color: var(--rasci-c-fg);
}

.rasci-I {
  background: var(--rasci-i-bg);
  color: var(--rasci-i-fg);
  border-color: var(--rasci-i-fg);
}

.rasci-link {
  color: inherit;
  opacity: .6;
  text-decoration: none;
  margin-left: 0.25em;
  font-size: 0.875em;
}

.rasci-link:hover {
  opacity: 1;
}

.rasci-error {
  color: var(--rasci-error);
}