/* JDRC_VISUAL_SURFACE_INTEGRATION_V14_3 */
/* V14.3 Surface Integration
   Additive presentation only. Existing subsystem colors, routes, JS, and business logic remain authoritative. */

[data-jdrc-surface]{
  --jdrc-v143-card-radius:16px;
  --jdrc-v143-card-line:rgba(255,255,255,.105);
  --jdrc-v143-card-line-strong:rgba(255,255,255,.17);
  --jdrc-v143-card-bg:rgba(13,14,17,.84);
  --jdrc-v143-card-soft:rgba(255,255,255,.028);
  --jdrc-v143-field-bg:rgba(7,8,10,.78);
  --jdrc-v143-muted:#a4abb5;
  --jdrc-v143-shadow:0 16px 48px rgba(0,0,0,.22);
  --jdrc-v143-shadow-hover:0 20px 58px rgba(0,0,0,.28);
}

body[data-jdrc-surface="membership"]{
  --jdrc-v14-accent:#f59e0b;
  --jdrc-v14-focus:#f59e0b;
}

/* Shared section-title rhythm without changing subsystem typography. */
[data-jdrc-surface] :where(
  .section-heading,
  .panel-title,
  .pit-feed-section-head,
  .pit-os-card-head,
  .membership-economy-head,
  .reload-xp-v6-head,
  .reward-v7-head,
  .sponsor-section-head,
  .sponsor-card-heading,
  .pool-card-head
){
  gap:16px;
}

[data-jdrc-surface] :where(
  .section-heading,
  .panel-title,
  .pit-feed-section-head,
  .pit-os-card-head,
  .membership-economy-head,
  .reload-xp-v6-head,
  .reward-v7-head,
  .sponsor-section-head,
  .sponsor-card-heading,
  .pool-card-head
) :where(h2,h3){
  line-height:1.08;
  text-wrap:balance;
}

[data-jdrc-surface] :where(
  .section-heading,
  .panel-title,
  .pit-feed-section-head,
  .pit-os-card-head,
  .membership-economy-head,
  .reload-xp-v6-head,
  .reward-v7-head,
  .sponsor-section-head,
  .sponsor-card-heading,
  .pool-card-head
) p{
  line-height:1.58;
}

/* One card geometry language across the platform. Background accents stay subsystem-owned. */
[data-jdrc-surface] :where(
  .class-card,
  .race-type-card,
  .discover-card,
  .gallery-handoff,
  .membership-teaser,
  .driver-portal-cta,
  .portal-panel,
  .pit-feed-card,
  .pit-feed-composer,
  .pit-os-card,
  .jdrc-panel,
  .membership-plan-card,
  .membership-economy-v5,
  .reload-xp-v6-panel,
  .reward-v7-panel,
  .reward-v7-card,
  .sponsor-dashboard-card,
  .sponsor-demo-product,
  .admin-panel,
  .pool-card,
  .economy-card,
  .progression-card,
  .profit-v8-card,
  .pit-sponsor-v4-card,
  .sw-race-hero,
  .sw-race-panel,
  .sw-race-section
){
  border-radius:var(--jdrc-v143-card-radius);
  border-color:var(--jdrc-v143-card-line);
  box-shadow:var(--jdrc-v143-shadow);
}

/* Interactive cards receive the same restrained hover edge. */
[data-jdrc-surface="public"] :where(.class-card,.race-type-card,.discover-card),
[data-jdrc-surface="membership"] .membership-plan-card{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

[data-jdrc-surface="public"] :where(.class-card,.race-type-card,.discover-card):hover,
[data-jdrc-surface="membership"] .membership-plan-card:hover{
  border-color:color-mix(in srgb,var(--jdrc-v14-accent) 45%,var(--jdrc-v143-card-line));
  box-shadow:var(--jdrc-v143-shadow-hover);
}

/* Shared control geometry. Existing classes retain their own colors. */
[data-jdrc-surface] :where(
  .button,
  .sponsor-primary,
  .sponsor-secondary,
  .sponsor-nav-button
){
  min-height:40px;
  border-radius:10px;
  font-weight:850;
  letter-spacing:.035em;
}

[data-jdrc-surface] :where(
  .button,
  .sponsor-primary,
  .sponsor-secondary,
  .sponsor-nav-button
):active{
  transform:translateY(1px);
}

/* Form fields use a common shape and focus ring, without touching checks/radios/files. */
[data-jdrc-surface] :where(
  .portal-form,
  .pit-feed-composer,
  .pit-os-form,
  .pit-os-inline-form,
  .sponsor-form,
  .editor-form,
  .settings-form,
  .booking-override-form
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea){
  min-height:42px;
  border-radius:10px;
  border-color:var(--jdrc-v143-card-line-strong);
  background:var(--jdrc-v143-field-bg);
  color:#f7f8fa;
  font:inherit;
}

[data-jdrc-surface] :where(
  .portal-form,
  .pit-feed-composer,
  .pit-os-form,
  .pit-os-inline-form,
  .sponsor-form,
  .editor-form,
  .settings-form,
  .booking-override-form
) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea):focus{
  border-color:color-mix(in srgb,var(--jdrc-v14-focus) 70%,#fff 5%);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--jdrc-v14-focus) 16%,transparent);
  outline:none;
}

[data-jdrc-surface] :where(
  .portal-form,
  .pit-os-form,
  .sponsor-form,
  .editor-form,
  .settings-form
) label{
  line-height:1.35;
}

/* Empty and loading states should look intentionally designed, not like missing content. */
[data-jdrc-surface] .empty-state,
[data-jdrc-surface] :where(.pit-os-empty,.sw-race-empty,.pit-sponsor-v4-empty){
  border-radius:14px;
  border-color:var(--jdrc-v143-card-line-strong);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  color:var(--jdrc-v143-muted);
  line-height:1.6;
}

/* Common status-chip proportions while preserving semantic colors. */
[data-jdrc-surface] :where(
  .status-chip,
  .pit-os-chip,
  .pit-feed-rule-chip,
  .membership-value-status,
  .reward-v7-status,
  .sponsor-account-status,
  .sw-race-status,
  .sw-race-source,
  .sw-race-entry-chip,
  .sw-race-rules-version
){
  min-height:28px;
  border-radius:999px;
  font-weight:850;
  line-height:1.1;
}

/* Public/store card rhythm. */
[data-jdrc-surface="public"] .section{
  scroll-margin-top:calc(var(--jdrc-v14-header-min) + 18px);
}
[data-jdrc-surface="public"] .section-heading{
  margin-bottom:22px;
}
[data-jdrc-surface="public"] :where(.class-card,.race-type-card,.discover-card){
  overflow:hidden;
}
[data-jdrc-surface="public"] :where(.gallery-handoff,.membership-teaser,.driver-portal-cta){
  border:1px solid var(--jdrc-v143-card-line);
}

/* Driver Pit. */
[data-jdrc-surface="driver"] .portal-dashboard-head{
  padding-bottom:18px;
  border-bottom:1px solid var(--jdrc-v143-card-line);
}
[data-jdrc-surface="driver"] .portal-panel{
  background:linear-gradient(145deg,rgba(17,18,22,.94),rgba(10,11,14,.92));
}
[data-jdrc-surface="driver"] .panel-title{
  align-items:flex-start;
}

/* Pit Feed. */
[data-jdrc-surface="pit-feed"] :where(.pit-feed-card,.pit-feed-composer){
  background:linear-gradient(145deg,rgba(15,18,23,.94),rgba(9,11,15,.94));
}
[data-jdrc-surface="pit-feed"] .pit-feed-toolbar{
  border-radius:14px;
  border:1px solid var(--jdrc-v143-card-line);
  box-shadow:0 12px 34px rgba(0,0,0,.18);
}
[data-jdrc-surface="pit-feed"] .pit-feed-tabs{
  gap:8px;
}

/* PIT operating system. */
[data-jdrc-surface="pit"] .pit-os-card{
  background:linear-gradient(145deg,rgba(11,18,23,.94),rgba(7,11,15,.94));
}
[data-jdrc-surface="pit"] .pit-os-tabs{
  border-radius:14px;
  border:1px solid var(--jdrc-v143-card-line);
}
[data-jdrc-surface="pit"] .pit-os-card-head{
  align-items:flex-start;
}

/* Membership. */
[data-jdrc-surface="membership"] :where(
  .jdrc-panel,
  .membership-plan-card,
  .membership-economy-v5,
  .reload-xp-v6-panel,
  .reward-v7-panel,
  .reward-v7-card,
  .member-password-panel,
  .portal-card
){
  border-color:var(--jdrc-v143-card-line);
}
[data-jdrc-surface="membership"] .membership-plan-card{
  overflow:hidden;
}
[data-jdrc-surface="membership"] :where(.membership-economy-head,.reload-xp-v6-head,.reward-v7-head){
  align-items:flex-start;
}

/* Advertiser. */
[data-jdrc-surface="sponsor"] .sponsor-dashboard-card{
  background:linear-gradient(145deg,rgba(9,18,17,.92),rgba(7,12,13,.94));
}
[data-jdrc-surface="sponsor"] :where(.sponsor-card-heading,.sponsor-section-head){
  align-items:flex-start;
}
[data-jdrc-surface="sponsor"] :where(.sponsor-campaign-summary,.sponsor-analytics-summary,.sponsor-product-capacity){
  border-radius:12px;
}

/* Sweepstakes retains Race Event / Prize Garage identity. Only geometry is aligned. */
[data-jdrc-surface="sweepstakes"] .sweepstakes-v16-public{
  scroll-margin-top:calc(var(--jdrc-v14-header-min) + 18px);
}
[data-jdrc-surface="sweepstakes"] :where(.sw-race-telemetry>div,.sw-race-winner,.sw-race-entry-status,.sw-race-guardrail){
  border-radius:13px;
  border-color:var(--jdrc-v143-card-line);
}

/* Admin surface: align dense tools without flattening the operational hierarchy. */
[data-jdrc-surface="admin"] .admin-panel{
  border-color:var(--jdrc-v143-card-line);
}
[data-jdrc-surface="admin"] :where(.pool-card,.economy-card,.progression-card,.profit-v8-card,.pit-sponsor-v4-card){
  border-color:var(--jdrc-v143-card-line);
}
[data-jdrc-surface="admin"] .panel-title{
  align-items:flex-start;
}
[data-jdrc-surface="admin"] :where(.admin-list,.economy-list,.progression-list,.reward-v7-list,.profit-v8-list){
  gap:10px;
}

/* Tables share readable density while keeping subsystem colors. */
[data-jdrc-surface] table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
[data-jdrc-surface] table :where(th,td){
  vertical-align:top;
}
[data-jdrc-surface] table th{
  color:var(--jdrc-v143-muted);
  font-size:.76rem;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
}

@media(max-width:760px){
  [data-jdrc-surface]{--jdrc-v143-card-radius:14px}

  [data-jdrc-surface] :where(
    .section-heading,
    .panel-title,
    .pit-feed-section-head,
    .pit-os-card-head,
    .membership-economy-head,
    .reload-xp-v6-head,
    .reward-v7-head,
    .sponsor-section-head,
    .sponsor-card-heading,
    .pool-card-head
  ){
    gap:12px;
  }

  [data-jdrc-surface] :where(.button,.sponsor-primary,.sponsor-secondary,.sponsor-nav-button){
    min-height:42px;
  }

  [data-jdrc-surface="driver"] .portal-dashboard-head{
    padding-bottom:14px;
  }
}

@media(prefers-reduced-motion:reduce){
  [data-jdrc-surface] :where(.class-card,.race-type-card,.discover-card,.membership-plan-card){
    transition:none!important;
  }
}