/* ═══════════════════════════════════════════════════════════════════════════════
   RULES LAYOUT — shared chrome for all rulebook pages
   ═══════════════════════════════════════════════════════════════════════════════ */

.rules-layout {
  display:               grid;
  grid-template-columns: 200px 1fr;
  max-width:             1200px;
  margin-inline:         auto;
  min-height:            calc(100vh - 64px);
  align-items:           start;
}

@media (max-width: 860px) {
  .rules-layout { grid-template-columns: 1fr; }
  .rules-nav    { display: none; } /* mobile: rely on site nav */
}

/* ── Rules sidebar nav ──────────────────────────────────────────────────────── */
.rules-nav {
  position:       sticky;
  top:            80px;
  padding:        var(--space-8) var(--space-4);
  border-right:   1px solid var(--color-border);
  min-height:     calc(100vh - 64px);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.rules-nav__list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-1);
  flex:       1;
}

.rules-nav__group-label {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-text-disabled);
  padding:        var(--space-3) 0 var(--space-1);
  margin-top:     var(--space-2);
}

.rules-nav__group-label:first-child { margin-top: 0; }

.rules-nav__link {
  display:         block;
  font-family:     var(--font-family-mono);
  font-size:       var(--font-tiny);
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           var(--color-text-secondary);
  text-decoration: none;
  padding:         var(--space-2) var(--space-3);
  border-left:     2px solid transparent;
  transition:      color var(--transition-fast), border-color var(--transition-fast);
}

.rules-nav__link:hover          { color: var(--color-text-primary); }
.rules-nav__link--active        { color: var(--color-accent); border-left-color: var(--color-accent); }

.rules-nav__draft-notice        { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); }

/* ── Rules content area ─────────────────────────────────────────────────────── */
.rules-content {
  padding:    var(--space-8) var(--space-8) var(--space-16);
  max-width:  960px;
}

/* ── Page header ────────────────────────────────────────────────────────────── */
.ref-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom:  1px solid var(--color-divider);
}

.ref-header h1 {
  font-size:   clamp(1.8rem, 4vw, 2.8rem);
  margin-block: var(--space-2) var(--space-3);
}

.ref-header__sub {
  font-size: var(--font-large);
  color:     var(--color-text-secondary);
  max-width: 60ch;
}

/* ── Shared two-column panel layout ─────────────────────────────────────────── */
.ref-two-col {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
  margin-bottom:         var(--space-5);
}

@media (max-width: 640px) { .ref-two-col { grid-template-columns: 1fr; } }

.ref-panel {
  background: var(--color-surface-raised);
  border:     1px solid var(--color-border);
  padding:    var(--space-4) var(--space-5);
}

.ref-panel__label {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.12em;
  color:          var(--color-text-disabled);
  margin-bottom:  var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom:  1px solid var(--color-border);
  display:        block;
}

.ref-panel__body {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.7;
}

/* Derives list */
.derives-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
}

.derives-list li {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  display:     flex;
  gap:         var(--space-3);
  align-items: baseline;
  line-height: 1.5;
}

.derives-list li::before {
  content:     '→';
  font-family: var(--font-family-mono);
  color:       var(--color-accent);
  font-size:   var(--font-tiny);
  flex-shrink: 0;
}

.derives-list li strong { color: var(--color-text-primary); font-weight: 600; }

/* ── Section label ──────────────────────────────────────────────────────────── */
.ref-section-label {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.12em;
  color:          var(--color-text-disabled);
  margin-bottom:  var(--space-3);
}

/* ── Example uses grid ──────────────────────────────────────────────────────── */
.use-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  margin-bottom:  var(--space-6);
}

.use-item {
  background:  var(--color-surface-raised);
  border:      1px solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  padding:     var(--space-3) var(--space-4);
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.6;
  transition:  border-left-color var(--transition-fast), background var(--transition-fast);
}

.use-item:hover { background: color-mix(in srgb, var(--color-accent) 3%, var(--color-surface-raised)); }
.use-item strong { color: var(--color-text-primary); font-weight: 600; }

/* ── Scale block ────────────────────────────────────────────────────────────── */
.scale-block {
  background:    var(--color-surface-raised);
  border:        1px solid var(--color-border);
  overflow:      hidden;
  margin-bottom: var(--space-6);
}

.scale-block__header {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.12em;
  color:          var(--color-text-disabled);
  padding:        var(--space-2) var(--space-4);
  border-bottom:  1px solid var(--color-border);
  background:     var(--color-foreground);
}

.scale-row {
  display:      grid;
  grid-template-columns: 40px 1fr;
  border-bottom: 1px solid var(--color-border);
  transition:   background var(--transition-fast);
}

.scale-row:last-child    { border-bottom: none; }
.scale-row:hover         { background: var(--color-foreground); }

.scale-row__num {
  font-family: var(--font-family-mono);
  font-size:   var(--font-base);
  display:     flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-border);
  padding:     var(--space-3) 0;
}

.scale-row__content { padding: var(--space-3) var(--space-4); }

.scale-row__label {
  font-family:    var(--font-family-display);
  font-size:      var(--font-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom:  var(--space-1);
  font-weight:    700;
}

.scale-row__desc {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Sensitivity / cyberware table ──────────────────────────────────────────── */
.sensitivity-block {
  background:    var(--color-surface-raised);
  border:        1px solid rgba(144, 96, 240, 0.25);
  padding:       var(--space-5);
  margin-bottom: var(--space-6);
}

.sensitivity-block__body {
  font-size:     var(--font-small);
  color:         var(--color-text-secondary);
  line-height:   1.7;
  margin-bottom: var(--space-4);
}

.cw-table-wrap { overflow-x: auto; }

.cw-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--font-small);
  font-family:     var(--font-family-mono);
}

.cw-table th {
  font-size:      var(--font-tiny);
  letter-spacing: 0.08em;
  color:          var(--color-text-disabled);
  padding:        var(--space-2) var(--space-3);
  border-bottom:  1px solid var(--color-border);
  text-align:     left;
  font-weight:    400;
}

.cw-table td {
  padding:        var(--space-2) var(--space-3);
  border-bottom:  1px solid var(--color-border);
  color:          var(--color-text-secondary);
}

.cw-table tr:last-child td { border-bottom: none; }
.cw-table tr:hover td      { background: var(--color-foreground); }

.cw-full  { color: var(--color-accent) !important; }
.cw-light { color: var(--color-warning) !important; }
.cw-heavy { color: var(--color-danger) !important; }
.cw-floor { color: var(--color-text-disabled) !important; }

/* ── Attribute tags ─────────────────────────────────────────────────────────── */
.attr-tags {
  display:   flex;
  gap:       var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.attr-tag {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.06em;
  padding:        2px var(--space-3);
  border:         1px solid var(--color-border);
  color:          var(--color-text-disabled);
}

.attr-tag--accent { border-color: rgba(0, 255, 231, 0.3); color: var(--color-accent); }

/* ═══════════════════════════════════════════════════════════════════════════════
   ATTRIBUTES PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Tab nav ────────────────────────────────────────────────────────────────── */
.attr-tab-nav {
  display:       flex;
  gap:           var(--space-2);
  flex-wrap:     wrap;
  margin-bottom: var(--space-6);
}

.attr-tab {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-small);
  letter-spacing: 0.1em;
  padding:        var(--space-2) var(--space-5);
  background:     transparent;
  border:         1px solid var(--color-border);
  color:          var(--color-text-secondary);
  cursor:         pointer;
  transition:     all var(--transition-fast);
  clip-path:      polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.attr-tab:hover        { border-color: var(--attr-color); color: var(--attr-color); }
.attr-tab--active      { background: color-mix(in srgb, var(--attr-color) 12%, transparent); border-color: var(--attr-color); color: var(--attr-color); }

/* ── Attribute panels ───────────────────────────────────────────────────────── */
.attr-panel              { display: none; animation: rules-fadein 0.2s ease; }
.attr-panel--active      { display: block; }

@keyframes rules-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.attr-panel__header {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom:  1px solid var(--color-border);
}

.attr-panel__glyph {
  font-family: var(--font-family-mono);
  font-size:   3rem;
  line-height: 1;
  flex-shrink: 0;
  text-shadow: 0 0 20px currentColor;
}

.attr-panel__name {
  font-size:   var(--font-h2);
  margin-bottom: var(--space-1);
}

.attr-panel__tagline {
  color:     var(--color-text-secondary);
  font-size: var(--font-small);
  max-width: 56ch;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SKILLS PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Tier strip ─────────────────────────────────────────────────────────────── */
.tier-strip {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--space-3);
  margin-bottom:         var(--space-8);
}

@media (max-width: 560px) { .tier-strip { grid-template-columns: 1fr; } }

.tier-pill {
  background: var(--color-surface-raised);
  border:     1px solid var(--color-border);
  padding:    var(--space-4) var(--space-5);
}

.tier-pill__label {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.1em;
  color:          var(--color-accent);
  margin-bottom:  var(--space-2);
  display:        block;
}

.tier-pill__text {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.5;
}

.tier-pill__text strong { color: var(--color-text-primary); }

/* ── Category tab nav ───────────────────────────────────────────────────────── */
.skill-cat-nav {
  display:       flex;
  gap:           var(--space-2);
  flex-wrap:     wrap;
  margin-bottom: var(--space-6);
}

.skill-cat-btn {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.1em;
  padding:        var(--space-2) var(--space-4);
  background:     transparent;
  border:         1px solid var(--color-border);
  color:          var(--color-text-secondary);
  cursor:         pointer;
  transition:     all var(--transition-fast);
  display:        flex;
  align-items:    center;
  gap:            var(--space-2);
}

.skill-cat-btn:hover   { color: var(--cat-color); border-color: var(--cat-color); }
.skill-cat-btn--active { color: var(--cat-color); border-color: var(--cat-color); background: color-mix(in srgb, var(--cat-color) 8%, transparent); }

/* ── Category panels ────────────────────────────────────────────────────────── */
.skill-cat-panel         { display: none; animation: rules-fadein 0.2s ease; }
.skill-cat-panel--active { display: block; }

.skill-cat-header {
  display:       flex;
  align-items:   baseline;
  gap:           var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom:  1px solid var(--color-border);
}

.skill-cat-name {
  font-size:   var(--font-h3);
  line-height: 1;
}

.skill-cat-desc {
  font-size: var(--font-small);
  color:     var(--color-text-secondary);
}

/* ── Skill grid ─────────────────────────────────────────────────────────────── */
.skill-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap:                   var(--space-4);
}

@media (max-width: 720px) { .skill-grid { grid-template-columns: 1fr; } }

/* ── Skill cards ────────────────────────────────────────────────────────────── */
.skill-card {
  background:     var(--color-surface-raised);
  border:         1px solid var(--color-border);
  border-top:     2px solid var(--cat-color, var(--color-accent));
  display:        flex;
  flex-direction: column;
  transition:     border-color var(--transition-fast), transform var(--transition-fast);
}

.skill-card:hover { transform: translateY(-1px); }

.skill-card--locked { opacity: 0.85; }
.skill-card--technomancer { border-top-color: var(--color-accent) !important; }

.skill-card__top {
  padding:       var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.skill-card__header {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             var(--space-3);
  margin-bottom:   var(--space-2);
  flex-wrap:       wrap;
}

.skill-card__name {
  font-family:    var(--font-family-display);
  font-size:      var(--font-base);
  font-weight:    700;
  color:          var(--color-text-primary);
  letter-spacing: 0.04em;
}

.skill-card__attr {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.06em;
  color:          var(--color-text-disabled);
  flex-shrink:    0;
}

.skill-locked-badge {
  display:        inline-block;
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.06em;
  padding:        2px var(--space-2);
  border:         1px solid rgba(255, 60, 95, 0.3);
  color:          var(--color-danger);
  margin-bottom:  var(--space-2);
}

.skill-locked-badge--technomancer {
  border-color: rgba(0, 255, 231, 0.3);
  color:        var(--color-accent);
}

.skill-card__overview {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
  line-height: 1.65;
}

/* ── Skill tier rows ────────────────────────────────────────────────────────── */
.skill-tiers { display: flex; flex-direction: column; }

.skill-tier-row {
  display:      grid;
  grid-template-columns: 88px 1fr;
  border-top:   1px solid var(--color-border);
}

.skill-tier-label {
  padding:        var(--space-3) var(--space-3);
  background:     var(--color-foreground);
  border-right:   1px solid var(--color-border);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  align-items:    flex-start;
}

.skill-tier-content {
  padding: var(--space-3) var(--space-4);
}

/* Tier badges */
.tier-badge {
  font-family:    var(--font-family-mono);
  font-size:      var(--font-tiny);
  letter-spacing: 0.08em;
}

.tier-badge--g { color: var(--cat-color, var(--color-accent)); }
.tier-badge--f { color: var(--color-text-secondary); }
.tier-badge--s { color: var(--color-text-disabled); }

.tier-note {
  font-size:   var(--font-tiny);
  color:       var(--color-text-disabled);
  line-height: 1.3;
}

.general-text {
  font-size:   var(--font-small);
  color:       var(--color-text-secondary);
}

/* Focus list */
.focus-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  font-size:      var(--font-small);
  color:          var(--color-text-secondary);
  line-height:    1.4;
}

.focus-list strong { color: var(--color-text-primary); font-weight: 600; }

.spec-text {
  font-size:   var(--font-small);
  color:       var(--color-text-disabled);
  font-style:  italic;
  line-height: 1.5;
}

/* ── Shared footer ──────────────────────────────────────────────────────────── */
.ref-footer {
  display:         flex;
  justify-content: space-between;
  padding-top:     var(--space-8);
  margin-top:      var(--space-8);
  border-top:      1px solid var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RULES INDEX PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

.rules-index-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   var(--space-4);
  margin-bottom:         var(--space-10);
}

.rules-index-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  padding:        var(--space-5);
  background:     var(--color-surface-raised);
  border:         1px solid var(--color-border);
  text-decoration: none;
  color:          inherit;
  position:       relative;
  overflow:       hidden;
  transition:     border-color var(--transition-normal), transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* Accent line slides in on hover */
.rules-index-card::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     2px;
  background: var(--color-accent);
  transform:  scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-normal);
}

.rules-index-card:not(.rules-index-card--pending):hover {
  border-color: var(--color-accent);
  transform:    translateY(-2px);
  box-shadow:   0 8px 32px color-mix(in srgb, var(--color-accent) 8%, transparent);
}

.rules-index-card:not(.rules-index-card--pending):hover::before {
  transform: scaleX(1);
}

/* Pending state */
.rules-index-card--pending {
  opacity: 0.5;
  cursor:  default;
  pointer-events: none;
}

.rules-index-card__top {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-3);
}

.rules-index-card__glyph {
  font-size:   1.8rem;
  color:       var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
  text-shadow: 0 0 12px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

.rules-index-card--pending .rules-index-card__glyph {
  color:       var(--color-text-disabled);
  text-shadow: none;
}

.rules-index-card__title-row {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.rules-index-card__title {
  font-size:      var(--font-h4);
  letter-spacing: 0.04em;
  color:          var(--color-text-primary);
}

.rules-index-card__badge {
  font-size:      var(--font-tiny);
  letter-spacing: 0.1em;
  padding:        2px var(--space-2);
}

.rules-index-card__badge--available {
  color:        var(--color-accent);
  border:       1px solid rgba(0, 255, 231, 0.3);
}

.rules-index-card__badge--pending {
  color:        var(--color-text-disabled);
  border:       1px solid var(--color-border);
}

.rules-index-card__desc {
  font-size:   var(--font-small);
  line-height: 1.6;
  flex:        1;
}

.rules-index-card__tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-2);
  margin-top: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-divider);
}

.rules-index-card__tag {
  font-size:      var(--font-tiny);
  letter-spacing: 0.06em;
  color:          var(--color-text-disabled);
}