/* ==========================================================================
   Blades in the Dark Character Sheet — Display & Form
   ==========================================================================
   TODO: If Phase 2 (crew sheets) reuses the bitd-dot / bitd-box elements,
   extract them into a shared ViewComponent or partial with their own CSS file.
   ========================================================================== */

.bitd-sheet {
  background: var(--parchment-50);
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  padding: var(--space-md);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Header — name left, playbook/identity right */
.bitd-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--parchment-500);
}

.bitd-sheet-header-left {
  flex: 1;
  min-width: 0;
  align-self: flex-start;
}

.bitd-sheet-header-right {
  text-align: right;
  flex-shrink: 0;
  align-self: flex-start;
}

.bitd-sheet-header-name {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bitd-sheet-alias {
  font-style: italic;
  margin-right: 0.1em;
}

.bitd-sheet-header-primary {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
}

.bitd-sheet-header-secondary {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.bitd-sheet-look {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: var(--space-3xs);
}

.bitd-sheet-compendium-link {
  color: var(--campaign-primary-color, var(--text-default));
  text-decoration: none;
  font-weight: 600;
}

.bitd-sheet-compendium-link:hover {
  text-decoration: underline;
}

.bitd-sheet-compendium-link--subtle {
  font-weight: 400;
}

/* Body layout */
.bitd-sheet-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Sections */
.bitd-sheet-section-heading {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

/* Action ratings */
.bitd-sheet-attributes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .bitd-sheet-attributes {
    grid-template-columns: 1fr;
  }
}

.bitd-sheet-attribute-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--parchment-400);
}

.bitd-sheet-attribute-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}

.bitd-sheet-attribute-xp {
  display: flex;
  gap: 2px;
  align-items: center;
}

.bitd-sheet-action-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.bitd-sheet-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3xs) 0;
}

.bitd-sheet-action-name {
  font-size: 0.85rem;
}

.bitd-sheet-action-dots {
  display: flex;
  gap: 3px;
}

/* Dots (filled circles for action ratings) */
.bitd-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--parchment-700);
  background: transparent;
}

.bitd-dot--filled {
  background: var(--parchment-800);
}

/* Interactive dots/boxes (form controls) */
.bitd-dot--interactive,
.bitd-box--interactive {
  cursor: pointer;
  transition: background-color 0.1s, transform 0.1s;
  padding: 0;
  border-color: var(--parchment-700);
}

.bitd-dot--interactive {
  /* Larger hit area for clickability */
  width: 14px;
  height: 14px;
}

.bitd-box--interactive {
  width: 16px;
  height: 16px;
}

.bitd-box--interactive.bitd-box--sm {
  width: 12px;
  height: 12px;
}

.bitd-dot--interactive:hover,
.bitd-box--interactive:hover {
  border-color: var(--campaign-primary-color, var(--parchment-900));
  transform: scale(1.15);
}

.bitd-dot--interactive.bitd-dot--filled,
.bitd-box--interactive.bitd-box--filled {
  background: var(--campaign-primary-color, var(--parchment-800));
  border-color: var(--campaign-primary-color, var(--parchment-800));
}

/* Boxes (filled squares for stress/XP) */
.bitd-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--parchment-700);
  background: transparent;
}

.bitd-box--filled {
  background: var(--parchment-800);
}

.bitd-box--sm {
  width: 9px;
  height: 9px;
}

/* Stress */
.bitd-sheet-stress-row,
.bitd-sheet-trauma-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bitd-sheet-label {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 50px;
}

.bitd-sheet-stress-boxes {
  display: flex;
  gap: 3px;
}

.bitd-sheet-stress-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bitd-sheet-trauma-tags {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

/* Harm */
.bitd-sheet-harm {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bitd-sheet-harm-entry {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
}

.bitd-sheet-harm-level {
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 70px;
  color: var(--text-muted);
}

/* Special Abilities (display) */
.bitd-sheet-abilities {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bitd-sheet-ability {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.bitd-sheet-ability-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.bitd-sheet-ability-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Items (two-column reference list) */
.bitd-sheet-items-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

@media (max-width: 640px) {
  .bitd-sheet-items-columns {
    grid-template-columns: 1fr;
  }
}

.bitd-sheet-items-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.bitd-sheet-items-column-heading {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2xs);
}

.bitd-sheet-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
}

.bitd-sheet-item-load {
  display: flex;
  gap: 2px;
  min-width: 28px;
}

.bitd-sheet-item-name {
  color: var(--text-default);
}

/* Contacts (display) */
.bitd-sheet-contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bitd-sheet-contact {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Header badges (tier, hold) */
.bitd-sheet-header-badges {
  display: flex;
  gap: var(--space-2xs);
  align-items: center;
}

/* Cohorts (display) */

/* Faction relationships (display) */
.bitd-sheet-factions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bitd-sheet-faction {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3xs) 0;
}

.bitd-sheet-faction-tier-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: var(--space-xs);
  margin-bottom: var(--space-3xs);
}

.bitd-sheet-faction-name {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Faction relationships (form) */
.bitd-cs-factions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bitd-cs-faction-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-3xs) 0;
}

.bitd-cs-faction-name {
  font-size: 0.85rem;
  flex: 1;
}

.bitd-cs-faction-tier-group {
  margin-bottom: var(--space-sm);
}

/* Legend */
.bitd-cs-faction-legend {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--parchment-400);
}

.bitd-cs-faction-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.bitd-cs-faction-legend-label {
  white-space: nowrap;
}

/* Status squares — 7 squares per faction, one per status level */
.bitd-cs-status-squares {
  display: flex;
  gap: 2px;
  align-items: center;
}

.bitd-cs-status-square {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--parchment-600);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.1s, transform 0.1s;
}

.bitd-cs-status-square:hover {
  transform: scale(1.2);
}

.bitd-cs-status-square--neg {
  border-color: var(--parchment-700);
}

.bitd-cs-status-square--pos {
  border-color: var(--parchment-700);
}

.bitd-cs-status-square--neutral {
  border-color: var(--parchment-500);
}

.bitd-cs-status-square--active.bitd-cs-status-square--neg {
  background: var(--parchment-800);
  border-color: var(--parchment-800);
}

.bitd-cs-status-square--active.bitd-cs-status-square--pos {
  background: var(--campaign-primary-color, var(--parchment-700));
  border-color: var(--campaign-primary-color, var(--parchment-700));
}

.bitd-cs-status-square--active.bitd-cs-status-square--neutral {
  background: var(--parchment-500);
  border-color: var(--parchment-500);
}

.bitd-sheet-cohorts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.bitd-sheet-cohort {
  padding: var(--space-xs);
  border: 1px solid var(--parchment-400);
  border-radius: var(--radius-sm);
}

.bitd-sheet-cohort-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.bitd-sheet-cohort-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.bitd-sheet-cohort-traits {
  display: flex;
  gap: var(--space-2xs);
  flex-wrap: wrap;
}

.bitd-sheet-contact-name {
  font-size: 0.85rem;
}

/* Tracks (coin, stash, playbook XP) */
.bitd-sheet-tracks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bitd-sheet-track-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bitd-sheet-track-boxes {
  display: flex;
  gap: 3px;
}

/* Vice */
.bitd-sheet-vice-type {
  font-weight: 600;
}

.bitd-sheet-vice-purveyor {
  color: var(--text-muted);
}

/* XP tracks */
.bitd-sheet-xp-tracks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bitd-sheet-xp-track {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.bitd-sheet-xp-label {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 70px;
}

.bitd-sheet-xp-boxes {
  display: flex;
  gap: 2px;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.bitd-character-sheet-form {
  padding: var(--space-sm) 0;
}

.bitd-cs-form-section {
  margin-bottom: var(--space-lg);
}

.bitd-cs-section-heading {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--parchment-400);
}

.bitd-cs-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.bitd-cs-attribute-group {
  margin-bottom: var(--space-md);
}

.bitd-cs-attribute-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-xs);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--parchment-400);
}

.bitd-cs-attribute-label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
}

.bitd-cs-attribute-xp {
  display: flex;
  gap: 2px;
  align-items: center;
}

.bitd-cs-action-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

/* Action field in form — mirrors display layout */
.bitd-cs-action-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3xs) 0;
}

.bitd-cs-action-name {
  font-size: 0.85rem;
}

.bitd-cs-dot-row,
.bitd-cs-box-row {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Clickable track row (stress, XP) */
.bitd-cs-clickable-track {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.bitd-cs-track-label {
  font-size: 0.85rem;
  font-weight: 600;
  min-width: 70px;
}

.bitd-cs-track-count {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Contacts (form) */
.bitd-cs-contacts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bitd-cs-contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-3xs) 0;
}

.bitd-cs-contact-name {
  font-size: 0.85rem;
  flex: 1;
}

.bitd-cs-contact-toggles {
  display: flex;
  gap: var(--space-3xs);
  align-items: center;
}

.bitd-cs-contact-toggle {
  cursor: pointer;
}

.bitd-cs-contact-toggle input[type="radio"] {
  display: none;
}

.bitd-cs-contact-option {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--parchment-500);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color 0.1s, color 0.1s;
}

.bitd-cs-contact-toggle input[type="radio"]:checked + .bitd-cs-contact-option--friend {
  background: var(--campaign-primary-color, var(--parchment-700));
  color: var(--parchment-50);
  border-color: var(--campaign-primary-color, var(--parchment-700));
}

.bitd-cs-contact-toggle input[type="radio"]:checked + .bitd-cs-contact-option--rival {
  background: var(--parchment-800);
  color: var(--parchment-50);
  border-color: var(--parchment-800);
}

/* Trauma toggles */
.bitd-cs-trauma-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xs);
}

@media (max-width: 640px) {
  .bitd-cs-trauma-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bitd-cs-trauma-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  cursor: pointer;
  font-size: 0.85rem;
}

.bitd-cs-trauma-toggle input[type="checkbox"] {
  accent-color: var(--campaign-primary-color, var(--parchment-800));
}

/* Special abilities checkboxes */
.bitd-cs-abilities-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bitd-cs-ability-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  cursor: pointer;
  font-size: 0.85rem;
}

.bitd-cs-ability-toggle input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--campaign-primary-color, var(--parchment-800));
}

.bitd-cs-ability-name {
  font-weight: 600;
}

.bitd-cs-ability-desc {
  flex-basis: 100%;
  padding-left: calc(16px + var(--space-2xs));
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.bitd-cs-ability-playbook-tag {
  font-size: 0.7rem;
}

/* Other playbooks abilities — collapsible section */
.bitd-cs-other-abilities {
  margin-top: var(--space-sm);
  border-top: 1px solid var(--parchment-300);
  padding-top: var(--space-sm);
}

.bitd-cs-other-abilities-toggle {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.bitd-cs-other-abilities-toggle:hover {
  color: var(--text-default);
}

.bitd-cs-ability-search {
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
}

.bitd-cs-ability-group {
  margin-bottom: var(--space-xs);
}

.bitd-cs-ability-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--space-3xs);
}