/* Scoped layout corrections. Load after the shared shell and helper styles. */
@media screen {
  /* These two tabs are navigation; nested filter tabs keep their own layout. */
  body.site-design .tabs-container:has(> #scripts):has(> #demons) > .tabs-header:not(.sub-tabs) {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    min-width:0;
    gap:8px;
    padding:0;
    overflow:visible;
    background:transparent;
    border-bottom:0;
  }

  body.site-design .tabs-container:has(> #scripts):has(> #demons) > .tabs-header:not(.sub-tabs) > .tab-btn {
    box-sizing:border-box;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:48px;
    margin:0;
    padding:12px 16px;
    white-space:normal;
    line-height:1.4;
    border:1px solid var(--ds-line);
    border-radius:8px;
    background:var(--ds-inset);
    color:var(--ds-muted);
  }

  body.site-design .tabs-container:has(> #scripts):has(> #demons) > .tabs-header:not(.sub-tabs) > .tab-btn.active {
    color:var(--ds-text);
    background:color-mix(in srgb,var(--ds-accent) 18%,var(--ds-inset));
    border-color:var(--ds-accent);
    box-shadow:inset 0 -2px 0 var(--ds-accent);
  }

  /* Cards share the page heading's width; paragraphs retain a readable measure. */
  body.site-design .helper-section > .legal-content {
    width:100%;
    max-width:none!important;
    min-width:0;
  }

  body.site-design .helper-section > .legal-content > .legal-block {
    width:100%;
    min-width:0;
  }

  body.site-design .helper-section > .legal-content > .legal-block > p {
    max-width:90ch;
    overflow-wrap:anywhere;
  }

  /* Bestiary availability uses complete chips on the full width of its row. */
  body.site-design[data-site-system="foba"] .item-card[data-req]:has(.req-tag) {
    background-image:none!important;
    background-color:var(--ds-panel)!important;
    border-color:var(--ds-line)!important;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req]:has(.req-tag):hover {
    border-color:var(--ds-accent)!important;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req] .meta-row:has(> .value > .req-tag) {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req] .meta-row:has(> .value > .req-tag) > .label {
    margin:0!important;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req] .meta-row > .value:has(> .req-tag) {
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:6px;
    width:100%;
    min-width:0;
    text-align:left;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req] .req-tag {
    --req-ink:#c2cdd4;
    --req-line:#52616d;
    --req-fill:#26323b;
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    max-width:100%;
    min-height:28px;
    margin:0;
    padding:5px 8px;
    border:1px solid var(--req-line)!important;
    border-radius:6px;
    color:var(--req-ink)!important;
    background:var(--req-fill);
    font-size:.75rem;
    line-height:1.4;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
  }

  /* Existing PHP exposes the three types through these inline colour values. */
  body.site-design[data-site-system="foba"] .item-card[data-req] .req-tag[style*="#76ff03" i] {
    --req-ink:#b4d7aa;
    --req-line:#536d54;
    --req-fill:#26392c;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req] .req-tag[style*="#4caf50" i] {
    --req-ink:#86bfa4;
    --req-line:#3b6756;
    --req-fill:#1c342c;
  }

  body.site-design[data-site-system="foba"] .item-card[data-req] .req-tag[style*="#e040fb" i] {
    --req-ink:#c7b3db;
    --req-line:#625174;
    --req-fill:#2d263b;
  }
}

@media screen and (max-width:768px) {
  /* Override the legacy <=480px column and full-width button rules. */
  body.site-design .site-header .user-actions {
    display:flex;
    flex-flow:row nowrap;
    align-items:center;
    flex:0 0 auto;
  }

  body.site-design .site-header .user-actions > .btn {
    width:auto;
    flex:0 0 auto;
  }
}