/* kamp.css — Fase 6.7 tail JS typography migration */

@layer components {
  .kamp-roll-mode-btn {
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    color: var(--hd-text-tertiary);
    cursor: pointer;
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold, 600);
    padding: 2px 6px;
  }

  .kamp-roll-mode-btn--advantage {
    border-radius: 3px 0 0 3px;
  }

  .kamp-roll-mode-btn--advantage.is-active {
    background: var(--hd-accent-success);
    color: var(--hd-accent-success);
  }

  .kamp-roll-mode-btn--disadvantage {
    border-radius: 0 3px 3px 0;
  }

  .kamp-roll-mode-btn--disadvantage.is-active {
    background: var(--hd-accent-secondary);
    color: var(--hd-activity-damage);
  }

  /* L-4 (D5E-05) cover selector — segmented group sharing the roll-mode-btn base. */
  .kamp-cover-btn {
    border-radius: 0;
  }
  .kamp-cover-group .kamp-cover-btn:first-child { border-radius: 3px 0 0 3px; }
  .kamp-cover-group .kamp-cover-btn:last-child { border-radius: 0 3px 3px 0; }
  .kamp-cover-btn.is-active {
    background: var(--hd-accent-secondary);
    color: var(--hd-text-primary);
  }

  .kamp-add-visibility--none { color: var(--hd-text-tertiary); }
  .kamp-add-visibility--half { color: var(--hd-accent-warning); }
  .kamp-add-visibility--full { color: var(--hd-accent-success); }
  .kamp-add-visibility--estimate { color: var(--hd-accent-warning); }

  .kamp-action-tab {
    background: var(--hd-surface-1);
    border: 1px solid var(--hd-border-medium);
    border-bottom-color: var(--hd-border-medium);
    border-radius: 6px 6px 0 0;
    color: var(--hd-text-tertiary);
    cursor: pointer;
    font-size: var(--hd-text-caption);
    font-weight: var(--hd-weight-regular, 400);
    margin-bottom: 0;
    padding: 4px 10px;
  }

  .kamp-action-tab.is-active {
    background: var(--hd-surface-base);
    border-color: var(--hd-border-strong);
    border-bottom-color: var(--hd-surface-base);
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold, 600);
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
  }

  .kamp-popup-close {
    color: var(--hd-text-tertiary);
    font-size: calc(var(--hd-text-body) * 1.125);
  }

  .kamp-popup-close:hover {
    color: var(--hd-text-primary);
  }

  .kamp-badge-remove {
    color: var(--hd-text-primary);
  }

  .kamp-badge-remove:hover {
    color: var(--hd-accent-error);
  }

  .kamp-stand-prone-btn {
    background: var(--hd-surface-2);
    border: 1px solid var(--hd-activity-check);
    border-radius: 10px;
    color: var(--hd-activity-check);
    cursor: pointer;
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-semibold, 600);
    min-height: 44px;
    padding: 1px 7px;
  }

  .kamp-stand-prone-btn:hover {
    background: var(--hd-activity-check);
    color: var(--hd-text-on-accent);
  }

  .kamp-dm__search-empty,
  .kamp-dm__search-error {
    font-size: var(--hd-text-ui-small);
    padding: 4px 6px;
  }

  .kamp-dm__search-empty { color: var(--hd-text-disabled); }
  .kamp-dm__search-error { color: var(--hd-activity-damage); }

  .kamp-dm__builder-empty {
    color: var(--hd-text-disabled);
    font-size: var(--hd-text-ui-small);
    padding: 2px;
  }

  .kamp-dm__difficulty-empty {
    color: var(--hd-text-disabled);
    font-size: var(--hd-text-ui-small);
  }

  .kamp-dm__stats-empty {
    color: var(--hd-text-disabled);
    font-size: var(--hd-text-caption);
    padding: 8px;
  }

  .kamp-dm__stats-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-ui-small);
  }

  .kamp-dm__stats-name {
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-semibold, 600);
    padding: 3px 4px;
  }

  .kamp-dm__speed-penalty {
    color: var(--hd-activity-damage);
    font-size: var(--hd-text-ui-small);
  }

  .kamp-analytics__mvp-label {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-bold);
    letter-spacing: 0.08em;
    margin-bottom: var(--hd-space-1);
    text-transform: uppercase;
  }

  .kamp-analytics__mvp-name {
    color: var(--hd-accent-warning);
    font-family: var(--hd-font-display);
    font-size: var(--hd-text-h4);
    font-weight: var(--hd-weight-bold);
  }

  .kamp-analytics__mvp-reason {
    color: var(--hd-text-secondary);
    font-size: var(--hd-text-body-small);
  }

  .kamp-analytics__damage-header {
    border-bottom: 1px solid var(--hd-border-subtle);
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
    text-align: left;
  }

  .kamp-analytics__damage-cell {
    font-weight: var(--hd-weight-medium);
    padding: var(--hd-space-1) var(--hd-space-2);
    text-align: right;
  }

  .kamp-analytics__damage-cell--dealt { color: var(--hd-accent-error); }
  .kamp-analytics__damage-cell--taken { color: var(--hd-accent-primary); }

  .kamp-obsidian__md-heading {
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-bold);
  }

  .kamp-obsidian__md-heading--3 {
    font-size: var(--hd-text-h6);
    margin: 6px 0 3px;
  }

  .kamp-obsidian__md-heading--2 {
    font-size: var(--hd-text-h6);
    margin: 8px 0 4px;
  }

  .kamp-obsidian__md-heading--1 {
    font-size: var(--hd-text-h5);
    margin: 10px 0 4px;
  }

  .kamp-obsidian__md-tag {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
  }

  .kamp-rules-tab__tag {
    display: inline-block;
    border-radius: 3px;
    font-size: var(--hd-text-ui-small);
    padding: 1px 5px;
    white-space: nowrap;
  }

  #kamp-row [style*="font-size"][style*="8px"],
  #kamp-row [style*="font-size"][style*="9px"],
  #kamp-row [style*="font-size"][style*="10px"],
  #kamp-row [style*="font-size"][style*="11px"],
  #kamp-row [style*="font-size:var(--hd-text-micro)"],
  #kamp-row [style*="font-size: var(--hd-text-micro)"] {
    font-size: var(--hd-text-caption) !important;
    line-height: var(--hd-leading-normal);
  }

  #kamp-row button[style*="font-size"][style*="9px"],
  #kamp-row button[style*="font-size"][style*="10px"],
  #kamp-row button[style*="font-size"][style*="11px"] {
    min-height: 28px;
    min-width: 48px;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .kamp-faction-btn {
    background: var(--hd-surface-1);
    color: var(--hd-text-secondary);
  }

  .kamp-faction-btn.is-active {
    background: var(--hd-activity-check);
    color: var(--hd-text-on-accent);
  }

  #kamp-row table {
    table-layout: auto !important;
  }

  #kamp-row td,
  #kamp-row th {
    overflow-wrap: anywhere;
    white-space: normal;
  }
}