@forwardimpact/pathway 0.22.0 → 0.23.0

package/src/css/components/surfaces.css

@@ -1,347 +0,0 @@
-/**
- * Surface Components
- *
- * Cards, sections, and surface styles.
- */
-
-@layer components {
-  /* Cards */
-  .card {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-    padding: var(--space-lg);
-    transition:
-      box-shadow 0.2s,
-      transform 0.2s;
-  }
-
-  .card:hover {
-    box-shadow: var(--shadow-lg);
-  }
-
-  .card-clickable {
-    cursor: pointer;
-  }
-
-  .card-clickable:hover {
-    transform: translateY(-2px);
-  }
-
-  .card-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: var(--space-md);
-  }
-
-  .card-title {
-    margin: 0;
-    font-size: var(--font-size-lg);
-  }
-
-  .card-title-with-icon {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-  }
-
-  .card-title-with-icon .card-title {
-    margin: 0;
-  }
-
-  /* Tool icons */
-  .tool-icon {
-    width: 28px;
-    height: 28px;
-    flex-shrink: 0;
-  }
-
-  /* Tool name cell with icon */
-  .tool-name-cell {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-  }
-
-  .card-description {
-    color: var(--color-text-muted);
-    margin: 0;
-    font-size: var(--font-size-sm);
-  }
-
-  .card-meta {
-    display: flex;
-    gap: var(--space-sm);
-    flex-wrap: wrap;
-    margin-top: var(--space-md);
-  }
-
-  /* Tool skills list (inside cards) */
-  .tool-skills-list {
-    list-style: none;
-    padding: 0;
-    margin: var(--space-sm) 0 0 0;
-    font-size: var(--font-size-sm);
-  }
-
-  .tool-skills-list li {
-    padding: var(--space-xs) 0;
-  }
-
-  .tool-skills-list a {
-    color: var(--color-text-secondary);
-    text-decoration: none;
-  }
-
-  .tool-skills-list a:hover {
-    color: var(--color-primary);
-    text-decoration: underline;
-  }
-
-  /* Stat cards */
-  .stat-card {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    padding: var(--space-lg);
-    text-align: center;
-    box-shadow: var(--shadow-md);
-    transition:
-      transform 0.2s,
-      box-shadow 0.2s;
-  }
-
-  .stat-card:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-  }
-
-  /* Surface utilities */
-  .surface {
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-  }
-
-  .surface-elevated {
-    box-shadow: var(--shadow-md);
-  }
-
-  .surface-bordered {
-    border: 1px solid var(--color-border);
-  }
-
-  .surface-padded {
-    padding: var(--space-lg);
-  }
-
-  .surface-padded-sm {
-    padding: var(--space-md);
-  }
-
-  /* Section headers */
-  .section-header {
-    margin-bottom: var(--space-lg);
-  }
-
-  .section-title {
-    font-size: var(--font-size-xl);
-    font-weight: 600;
-    margin: 0 0 var(--space-md);
-    color: var(--color-text);
-  }
-
-  .section-title-bordered {
-    padding-bottom: var(--space-sm);
-    border-bottom: 2px solid var(--color-border);
-  }
-
-  .section-description {
-    color: var(--color-text-muted);
-    margin: 0;
-  }
-
-  /* Page headers */
-  .page-header {
-    margin-bottom: var(--space-xl);
-  }
-
-  .page-title {
-    font-size: var(--font-size-3xl);
-    font-weight: 700;
-    margin: 0 0 var(--space-md);
-  }
-
-  .page-description {
-    font-size: var(--font-size-lg);
-    color: var(--color-text-muted);
-    margin: 0;
-    max-width: 80ch;
-  }
-
-  .page-meta {
-    display: flex;
-    gap: var(--space-sm);
-    flex-wrap: wrap;
-    margin-top: var(--space-sm);
-  }
-
-  .page-actions {
-    display: flex;
-    gap: var(--space-md);
-    margin-top: var(--space-md);
-    flex-wrap: wrap;
-  }
-
-  @media (max-width: 640px) {
-    .page-actions {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .page-actions .btn {
-      text-align: center;
-    }
-  }
-
-  /* Sections */
-  .section {
-    margin-top: var(--space-xl);
-    margin-bottom: var(--space-xl);
-  }
-
-  /* Detail pages */
-  .detail-page {
-    max-width: var(--max-width);
-    margin: 0 auto;
-  }
-
-  .detail-section {
-    margin-bottom: var(--space-2xl);
-  }
-
-  .detail-section:last-child {
-    margin-bottom: 0;
-  }
-
-  .detail-item {
-    background: var(--color-bg);
-    padding: var(--space-md);
-    border-radius: var(--radius-md);
-  }
-
-  .detail-item-value {
-    font-weight: 500;
-  }
-
-  /*
-   * List items: 60px row height = 16px padding-top + 28px content + 16px padding-bottom
-   * Uses bottom-border only for 1px gaps between items (like table rows)
-   * Left/right borders and rounded corners on first/last items match table styling
-   */
-  .list-item {
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    min-height: 60px;
-    padding: var(--space-md) var(--space-lg);
-    background: var(--color-surface);
-    border: 1px solid var(--color-border);
-    border-top: none;
-  }
-
-  /* First list-item in a sequence (handles heading before list items) */
-  .list-item:first-child,
-  :not(.list-item) + .list-item {
-    border-top: 1px solid var(--color-border);
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
-  }
-
-  .list-item:last-child {
-    border-bottom-left-radius: var(--radius-lg);
-    border-bottom-right-radius: var(--radius-lg);
-  }
-
-  /* Accent borders */
-  .accent-left {
-    border-left: 4px solid var(--color-border);
-  }
-
-  .accent-primary {
-    border-left-color: var(--color-primary);
-  }
-
-  .accent-success {
-    border-left-color: var(--color-success);
-  }
-
-  .accent-warning {
-    border-left-color: var(--color-warning);
-  }
-
-  .accent-error {
-    border-left-color: var(--color-error);
-  }
-
-  .accent-skill-primary {
-    border-left-color: var(--color-primary-skill);
-  }
-
-  .accent-skill-secondary {
-    border-left-color: var(--color-secondary);
-  }
-
-  .accent-skill-broad {
-    border-left-color: var(--color-broad);
-  }
-
-  /* Footer */
-  #app-footer {
-    background: var(--color-surface);
-    border-top: 1px solid var(--color-border);
-    padding: var(--space-lg);
-    text-align: center;
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-  }
-
-  #app-footer p {
-    margin: 0 0 var(--space-sm) 0;
-  }
-
-  .footer-links {
-    display: flex;
-    gap: var(--space-md);
-    justify-content: center;
-  }
-
-  .footer-links a {
-    color: var(--color-text-muted);
-    text-decoration: none;
-  }
-
-  .footer-links a:hover {
-    color: var(--color-primary);
-    text-decoration: underline;
-  }
-
-  .footer-quote {
-    margin: var(--space-lg) auto 0;
-    max-width: 50em;
-    font-style: italic;
-    color: var(--color-text-muted);
-    border: none;
-    padding: 0;
-  }
-
-  .footer-quote p {
-    margin: 0 0 var(--space-xs) 0;
-    font-size: var(--font-size-sm);
-    line-height: 1.5;
-  }
-
-  .footer-quote cite {
-    font-size: var(--font-size-xs);
-    font-style: normal;
-  }
-}

package/src/css/components/tables.css

@@ -1,362 +0,0 @@
-/**
- * Table Components
- *
- * Base table styles for all table variants.
- */
-
-@layer components {
-  /* Table container */
-  .table-container {
-    overflow-x: auto;
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-  }
-
-  /* Base table */
-  .table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .table th,
-  .table td {
-    padding: var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .table th {
-    background: var(--color-bg);
-    font-weight: 600;
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-  }
-
-  .table tr:last-child td {
-    border-bottom: none;
-  }
-
-  .table tr:hover td {
-    background: var(--color-bg);
-  }
-
-  /* Standard table column widths */
-  .table .col-name {
-    width: 20%;
-    min-width: 160px;
-  }
-
-  .table .col-capability {
-    width: 100px;
-    min-width: 100px;
-  }
-
-  .table .col-type {
-    width: 90px;
-    min-width: 90px;
-  }
-
-  .table .col-level {
-    width: 120px;
-    min-width: 120px;
-    text-align: center;
-  }
-
-  .table .col-change {
-    width: 70px;
-    min-width: 70px;
-    text-align: center;
-  }
-
-  .table .col-description {
-    width: auto;
-    min-width: 200px;
-  }
-
-  /* Data table */
-  .data-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .data-table th,
-  .data-table td {
-    padding: var(--space-sm) var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .data-table th {
-    background: var(--color-bg);
-    font-weight: 600;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-  }
-
-  .data-table tbody tr {
-    transition: background-color 0.2s ease;
-  }
-
-  .data-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  .data-table tr:last-child td {
-    border-bottom: none;
-  }
-
-  .data-table .col-narrow {
-    width: 100px;
-  }
-
-  .data-table .col-medium {
-    width: 150px;
-  }
-
-  .data-table .col-center {
-    text-align: center;
-  }
-
-  /* Level table */
-  .level-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-top: var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    background: var(--color-surface);
-  }
-
-  .level-table th,
-  .level-table td {
-    padding: var(--space-md) var(--space-lg);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .level-table th {
-    font-weight: 600;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    background: var(--color-bg);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .level-table th:first-child {
-    width: 180px;
-  }
-
-  .level-table tbody tr {
-    transition: background-color 0.2s ease;
-  }
-
-  .level-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  .level-table tbody tr:last-child td {
-    border-bottom: none;
-  }
-
-  .level-table td:first-child {
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  /* Progression table */
-  .progression-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: var(--space-md);
-  }
-
-  .progression-table th,
-  .progression-table td {
-    padding: var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .progression-table th {
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    background: var(--color-bg);
-  }
-
-  .progression-table tbody tr {
-    transition: background-color 0.2s ease;
-  }
-
-  .progression-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  .progression-table tr:last-child td {
-    border-bottom: none;
-  }
-
-  /* Progression table column widths */
-  .progression-table th:first-child,
-  .progression-table td:first-child {
-    width: 20%;
-    min-width: 160px;
-  }
-
-  /* Skills table: 6 columns (Name, Capability, Type, Current, Target, Change) */
-  .progression-table.skill-table th:nth-child(2),
-  .progression-table.skill-table td:nth-child(2) {
-    width: 100px;
-  }
-
-  .progression-table.skill-table th:nth-child(3),
-  .progression-table.skill-table td:nth-child(3) {
-    width: 90px;
-  }
-
-  .progression-table.skill-table th:nth-child(4),
-  .progression-table.skill-table td:nth-child(4),
-  .progression-table.skill-table th:nth-child(5),
-  .progression-table.skill-table td:nth-child(5) {
-    width: 120px;
-    text-align: center;
-  }
-
-  .progression-table.skill-table th:nth-child(6),
-  .progression-table.skill-table td:nth-child(6) {
-    width: 70px;
-    text-align: center;
-  }
-
-  /* Behaviour table: 4 columns (Name, Current, Target, Change) */
-  .progression-table.behaviour-table th:nth-child(2),
-  .progression-table.behaviour-table td:nth-child(2),
-  .progression-table.behaviour-table th:nth-child(3),
-  .progression-table.behaviour-table td:nth-child(3) {
-    width: 120px;
-    text-align: center;
-  }
-
-  .progression-table.behaviour-table th:nth-child(4),
-  .progression-table.behaviour-table td:nth-child(4) {
-    width: 70px;
-    text-align: center;
-  }
-
-  /* Matrix tables */
-  .matrix-table th:first-child,
-  .matrix-table td:first-child {
-    width: 25%;
-    min-width: 220px;
-  }
-
-  .matrix-table th:nth-child(2),
-  .matrix-table td:nth-child(2) {
-    width: 100px;
-  }
-
-  .matrix-table th:nth-child(3),
-  .matrix-table td:nth-child(3) {
-    width: 90px;
-  }
-
-  .matrix-table th:nth-child(4),
-  .matrix-table td:nth-child(4) {
-    width: 120px;
-    text-align: center;
-  }
-
-  .matrix-table th:last-child,
-  .matrix-table td:last-child {
-    width: auto;
-  }
-
-  /* Behaviour matrix */
-  .matrix-table.behaviour-matrix th:nth-child(2),
-  .matrix-table.behaviour-matrix td:nth-child(2) {
-    width: 120px;
-    text-align: center;
-  }
-
-  /* Levels table */
-  .levels-table th:first-child,
-  .levels-table td:first-child {
-    width: 120px;
-    text-align: center;
-  }
-
-  .levels-table td.level-cell {
-    text-align: center;
-    vertical-align: middle;
-  }
-
-  .levels-table td.level-cell .level-bar {
-    display: inline-flex;
-    justify-content: center;
-  }
-
-  .levels-table td.level-cell .level-label {
-    display: block;
-    font-size: var(--font-size-xs);
-    color: var(--color-text-muted);
-    margin-top: 2px;
-  }
-
-  /* Modifier tables */
-  .modifier-table th:last-child,
-  .modifier-table td:last-child {
-    width: 100px;
-    text-align: center;
-  }
-
-  /* Human-only skill indicators */
-  .human-only-row {
-    background: rgba(254, 243, 199, 0.3);
-  }
-
-  .human-only-indicator {
-    font-size: var(--font-size-xs);
-    opacity: 0.8;
-    cursor: help;
-  }
-
-  /* Lists */
-  .item-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .item-list li {
-    padding: var(--space-sm) 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .item-list li:last-child {
-    border-bottom: none;
-  }
-
-  .item-list-compact li {
-    padding: var(--space-xs) 0;
-  }
-
-  /* Related lists */
-  .related-list {
-    list-style: disc;
-    padding-left: var(--space-lg);
-    margin: var(--space-md) 0;
-  }
-
-  .related-list li {
-    padding: var(--space-xs) 0;
-    color: var(--color-text);
-  }
-}