/* NO NAME menu depth. Paint-only presentation shared by actual menu owners.
   Component CSS continues to own geometry, visibility, scrolling, status colors,
   artwork and interaction. No animated effects or additional scene layers. */
:root {
  --nn-depth-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --nn-depth-shell:
    linear-gradient(180deg, rgba(188, 224, 236, .10) 0, rgba(124, 188, 210, .025) 28px, transparent 74px),
    linear-gradient(115deg, rgba(59, 99, 116, .10), transparent 38%, rgba(1, 8, 14, .16)),
    linear-gradient(180deg, #112d3d 0, #0b202e 30%, #061520 100%);
  --nn-depth-edge-top: #6d9aad;
  --nn-depth-edge-side: #365a6e;
  --nn-depth-edge-bottom: #203e51;
  --nn-depth-shell-shadow:
    inset 0 1px 0 rgba(222, 246, 255, .17),
    inset 1px 0 0 rgba(178, 221, 238, .045),
    inset -1px 0 0 rgba(0, 3, 9, .48),
    inset 0 -3px 0 rgba(0, 5, 12, .48),
    0 2px 0 #020a12,
    0 5px 0 rgba(1, 7, 13, .66),
    0 18px 42px rgba(0, 0, 0, .46);
  --nn-depth-inset:
    inset 0 2px 4px rgba(0, 5, 12, .40),
    inset 0 -1px 0 rgba(143, 205, 230, .045),
    0 1px 0 rgba(169, 217, 235, .055);
  --nn-depth-raised:
    inset 0 1px 0 rgba(209, 239, 250, .16),
    inset 0 -2px 0 rgba(0, 7, 16, .36),
    0 2px 0 rgba(0, 6, 13, .72),
    0 3px 5px rgba(0, 0, 0, .16);
}

/* The same shell follows reparented native dialogs. The extra owner selector
   matches the existing, more specific Carrier dialog rules without moving them. */
html body :is(
  #carrierInfoPanel.carrierInfoPanel, #carrierRecoveryStatusV6300.p1DistressPanelV6221,
  #nonameMenuHelpDialog.nnMenuPanel, #systemUpgradeDialog, #commandRepairDialog,
  #commandHeroUpgradeDialog, #storageUpgradeDialog, #salvageDroneDialog,
  #cargoRecoveryPanel, #sectorNavigation.nnMenuPanel, #fuelBasePreview,
  #fuelBaseInterior, #fuelBayPanel, #topLeftPanelV693, #menuDrop,
  #galaxyChatPanel.galaxyChatV6261, #nonameWalkthrough.nnWalkthrough,
  #nnDownloadDialog, #nnTermsDialog, .nnAuthPanel,
  .menuDrop, .mapActionPanel, .targetCard, .npcCombatPanel,
  .carrierCombatHud, .droneCombatHudV6121, .fuelPortalPromptV6190,
  .traderPanelV61320, .salvagePanelV61318, .p1DistressPanelV6221,
  .planetJumpMenuV6226, .topLeftPanelV693, .enterBasePromptV6142,
  .planet1BaseMenuV6142, .carrierRepairPanel, .galaxyGarageV6141,
  .militaryRankPanelV6274, .mailWindowV62831, .warPanelV62792,
  .authPanelV62818, .planetDescriptionV62823, .cargoDroneDialog,
  .cargoRecoveryPanel, .nnMenuPanel),
html body #carrierInfoPanel :is(#systemUpgradeDialog, #commandRepairDialog, #commandHeroUpgradeDialog) {
  background: var(--nn-depth-shell) !important;
  border-top-color: var(--nn-depth-edge-top) !important;
  border-right-color: var(--nn-depth-edge-side) !important;
  border-bottom-color: var(--nn-depth-edge-bottom) !important;
  border-left-color: var(--nn-depth-edge-side) !important;
  box-shadow: var(--nn-depth-shell-shadow) !important;
}
/* The Hero tier remains a semantic outline, including its default green tier. */
html body #carrierInfoPanel #commandHeroUpgradeDialog {
  border-color: var(--command-card-border) !important;
}

/* Full-screen backgrounds and their art remain separate. Only the selector's
   information surface receives the shell; chosen/locked card colors are kept. */
html body .nnPlanetFeature {
  background: var(--nn-depth-shell) !important;
  border-top-color: var(--nn-depth-edge-top) !important;
  border-right-color: var(--nn-depth-edge-side) !important;
  border-bottom-color: var(--nn-depth-edge-bottom) !important;
  border-left-color: var(--nn-depth-edge-side) !important;
  box-shadow: var(--nn-depth-shell-shadow) !important;
}
html body .nnPlanetChoice:not(.active) {
  box-shadow: var(--nn-depth-raised) !important;
}
html body .galaxyChatToggleV6261 {
  background: var(--nn-depth-shell) !important;
  border-top-color: var(--nn-depth-edge-top) !important;
  border-right-color: var(--nn-depth-edge-side) !important;
  border-bottom-color: var(--nn-depth-edge-bottom) !important;
  border-left-color: var(--nn-depth-edge-side) !important;
  box-shadow: inset 0 1px 0 rgba(222, 246, 255, .16), inset 0 -2px 0 rgba(0, 5, 12, .45), 0 2px 0 #020a12, 0 7px 18px rgba(0, 0, 0, .32) !important;
}

/* Explicit HTML text elements avoid touching SVG hologram typography, image
   masks, icon fonts or any world labels outside these menu owners. Sizes and
   weights still come from the component, including compact/keyboard layouts. */
html body :is(
  #carrierInfoPanel, #carrierRecoveryStatusV6300, #nonameMenuHelpDialog,
  #systemUpgradeDialog, #commandRepairDialog, #commandHeroUpgradeDialog,
  #storageUpgradeDialog, #salvageDroneDialog, #cargoRecoveryPanel,
  #sectorNavigation, #fuelBasePreview, #fuelBaseInterior, #fuelBayPanel,
  #topLeftPanelV693, #menuDrop, #galaxyChatPanel, #nonameWalkthrough,
  #nnDownloadDialog, #nnTermsDialog, .nnAuthPanel, .nnPlanetChoice,
  .nnPlanetFeature, .galaxyChatToggleV6261, .menuDrop, .mapActionPanel,
  .targetCard, .npcCombatPanel, .carrierCombatHud, .droneCombatHudV6121,
  .fuelPortalPromptV6190, .traderPanelV61320, .salvagePanelV61318,
  .p1DistressPanelV6221, .planetJumpMenuV6226, .enterBasePromptV6142,
  .planet1BaseMenuV6142, .carrierRepairPanel, .galaxyGarageV6141,
  .militaryRankPanelV6274, .mailWindowV62831, .warPanelV62792,
  .authPanelV62818, .planetDescriptionV62823, .nnMenuPanel),
html body :is(
  #carrierInfoPanel, #carrierRecoveryStatusV6300, #nonameMenuHelpDialog,
  #systemUpgradeDialog, #commandRepairDialog, #commandHeroUpgradeDialog,
  #storageUpgradeDialog, #salvageDroneDialog, #cargoRecoveryPanel,
  #sectorNavigation, #fuelBasePreview, #fuelBaseInterior, #fuelBayPanel,
  #topLeftPanelV693, #menuDrop, #galaxyChatPanel, #nonameWalkthrough,
  #nnDownloadDialog, #nnTermsDialog, .nnAuthPanel, .nnPlanetChoice,
  .nnPlanetFeature, .galaxyChatToggleV6261, .menuDrop, .mapActionPanel,
  .targetCard, .npcCombatPanel, .carrierCombatHud, .droneCombatHudV6121,
  .fuelPortalPromptV6190, .traderPanelV61320, .salvagePanelV61318,
  .p1DistressPanelV6221, .planetJumpMenuV6226, .enterBasePromptV6142,
  .planet1BaseMenuV6142, .carrierRepairPanel, .galaxyGarageV6141,
  .militaryRankPanelV6274, .mailWindowV62831, .warPanelV62792,
  .authPanelV62818, .planetDescriptionV62823, .nnMenuPanel)
  :is(#nnTermsTitle, h1, h2, h3, h4, p, div, small, strong, b, span, label, button, input,
    select, textarea, dt, dd, li, a, summary, time, legend, output),
html body #carrierInfoPanel :is(#systemUpgradeDialog, #commandRepairDialog, #commandHeroUpgradeDialog)
  :is(h2, h3, p, div, small, strong, b, span, label, button, dt, dd, li),
html body #sectorTravelChoices #sectorTravelTitle {
  font-family: var(--nn-depth-font) !important;
}

/* Existing header dividers become the lower edge of a shallow metal shelf.
   No new padding, height or borders are introduced. */
html body :is(
  .carrierInfoHead, .mapActionHead, .npcCombatHead, .carrierCombatTitle,
  .droneHudTopV6121, .baseMenuHeaderV6142, .carrierChooserHeadV6148,
  .planetJumpHeadV6226, .rankPanelHeadV6274, .mailHeaderV62831,
  .warHeadV62761, .nnMenuHeading, .fuelBaseHeading, .fuelBayHead,
  .galaxyChatHeadV6261, .nnAuthHeadingRow, .nnPlanetFeatureHeading,
  .nnWalkthroughHeader, .nnDownloadHeading, .nnTermsHeading,
  .cargoPanelHeading, .recoveryHeadingV6310) {
  border-bottom-color: rgba(123, 179, 201, .28) !important;
  box-shadow: 0 1px 0 rgba(0, 7, 15, .50), 0 2px 0 rgba(134, 197, 218, .035);
}

/* Recessed information bays. Semantic damage rows, meters, rank/hero cards and
   artwork containers deliberately retain their own fills and outlines. */
html body :is(
  .carrierPrimaryStatsV62790 > div, .carrierEquipmentGridV62790 > div,
  .carrierDroneStatsV62790 > div, .carrierInfoGrid > div,
  .carrierInfoStatus, .playerAccountRowV62829, .basePageCardV6142,
  .modernPowerV6109, .modernBarRowV6109, .modernCarrierRoleV6140,
  .creditStatusV6109, .droneHudRowV6121, .carrierChoiceStatsV6148 > div,
  .rankStrengthPlaceholderV6274, .planetJumpRuleV6226, .nnMenuCard,
  .storageMaterialGroup, .storageFuelCard, .storageRawCard, .fuelCargoSummary,
  .storageUpgradeStats > div, .storageUpgradeRequirements,
  .systemUpgradeQuote, .systemUpgradeResources, .commandRepairQuote,
  .commandRepairKit, .commandHeroUpgradeResources, .hospitalRepairQuote,
  .hospitalRepairKit, .fuelStationBalances > div, .fuelHospitalReportHead,
  .fleetFuelBalances > div, .fleetJobCard, .fleetSaleRow,
  .fleetRegularStorage, .fleetEngineCard, .fleetAllianceCard,
  .cargoOverview, .cargoDroneAvailability, .cargoMissionStatus,
  .cargoDroneCounts > div, .cargoAdditionalDrone,
  .recoveryFactsV6310 > div,
  .sectorTravelFacts > div) {
  background: linear-gradient(180deg, rgba(3, 16, 25, .92), rgba(11, 33, 45, .88)) !important;
  box-shadow: var(--nn-depth-inset) !important;
}
html body :is(.storageMaterialSummary, .cargoContents > summary) {
  box-shadow: inset 0 1px 0 rgba(155, 211, 234, .065), inset 0 -1px 0 rgba(0, 6, 14, .40);
}
html body :is(.carrierSystemTileV62771, .systemsUpgradeCard) {
  box-shadow: var(--nn-depth-inset) !important;
}

/* Ordinary commands gain a raised face without repainting their existing
   semantic colors. Tabs with state/selection indicators and art choices are
   excluded, as are the inline links and circular shared help control. */
html body :is(
  #carrierInfoPanel, #carrierRecoveryStatusV6300, #nonameMenuHelpDialog,
  #systemUpgradeDialog, #commandRepairDialog, #commandHeroUpgradeDialog,
  #storageUpgradeDialog, #salvageDroneDialog, #cargoRecoveryPanel,
  #fuelBasePreview, #fuelBaseInterior, #fuelBayPanel, #topLeftPanelV693,
  #menuDrop, #galaxyChatPanel, #nonameWalkthrough, #nnDownloadDialog,
  #nnTermsDialog, .menuDrop, .mapActionPanel, .targetCard, .npcCombatPanel,
  .carrierCombatHud, .droneCombatHudV6121, .fuelPortalPromptV6190,
  .traderPanelV61320, .salvagePanelV61318, .p1DistressPanelV6221,
  .planetJumpMenuV6226, .enterBasePromptV6142, .planet1BaseMenuV6142,
  .carrierRepairPanel, .galaxyGarageV6141, .militaryRankPanelV6274,
  .mailWindowV62831, .warPanelV62792)
  button:where(:not(.nnMenuInfoButton, .carrierChoiceCardV6148, .planetCardV62823,
    .playerRankBadgeButtonV62739, #carrierMilitaryRankV62781,
    [data-carrier-tab-v62790], [data-command-condition], [data-tab-status],
    .active, [aria-selected="true"], [aria-pressed="true"], .nnTermsLink)),
html body :is(.nnAuthSubmit, .nnAuthTabs > button:not(.active), #nnDownloadButton,
  #enterPlanetBtnV62823, #sectorNavigationConfirm, #sectorNavigationWarpConfirm,
  #sectorEmergencyTow),
html body #sectorNavigation :is([data-nav-close], [data-travel-close]),
html body #sectorNavigation [data-navigation-view]:not(.active) {
  box-shadow: var(--nn-depth-raised) !important;
}

/* Pressed and disabled commands retain their original opacity/cursor. A
   physical-looking inset is enough feedback without moving the control. */
html body :is(
  #carrierInfoPanel, #fuelBasePreview, #fuelBaseInterior, #fuelBayPanel,
  #sectorNavigation, #carrierRecoveryStatusV6300, #nonameMenuHelpDialog,
  #systemUpgradeDialog, #commandRepairDialog, #commandHeroUpgradeDialog,
  #storageUpgradeDialog, #salvageDroneDialog, #cargoRecoveryPanel,
  #galaxyChatPanel, #nonameWalkthrough, #nnDownloadDialog, #nnTermsDialog)
  button:where(:not(.nnMenuInfoButton, .carrierChoiceCardV6148, .planetCardV62823,
    .playerRankBadgeButtonV62739, #carrierMilitaryRankV62781,
    [data-carrier-tab-v62790], [data-command-condition], [data-tab-status],
    [data-local-destination], [data-sector-destination], .nnTermsLink)):active:not(:disabled):not([aria-busy="true"]),
html body :is(.nnAuthSubmit, #nnDownloadButton, #enterPlanetBtnV62823):active:not(:disabled):not([aria-busy="true"]) {
  box-shadow: inset 0 2px 4px rgba(0, 5, 12, .50), inset 0 -1px 0 rgba(190, 229, 244, .10) !important;
}
html body :is(
  #carrierInfoPanel, #fuelBasePreview, #fuelBaseInterior, #fuelBayPanel,
  #carrierRecoveryStatusV6300, #systemUpgradeDialog, #commandRepairDialog,
  #commandHeroUpgradeDialog, #storageUpgradeDialog, #salvageDroneDialog,
  #cargoRecoveryPanel, #galaxyChatPanel, #nonameWalkthrough,
  #nnDownloadDialog, #nnTermsDialog) button:disabled:where(:not(
    #carrierMilitaryRankV62781, .nnMenuInfoButton, [data-carrier-tab-v62790],
    [data-command-condition], [data-tab-status])) {
  box-shadow: inset 0 1px 2px rgba(0, 5, 12, .30) !important;
}

/* Form wells and the Chat transcript keep their existing layouts and colors.
   Checkboxes, radio controls, bars and native validation are not restyled. */
html body :is(
  #carrierInfoPanel, #fuelBasePreview, #fuelBaseInterior, #fuelBayPanel,
  #galaxyChatPanel, #topLeftPanelV693, .nnAuthPanel, .galaxyGarageV6141,
  .traderPanelV61320, .mailWindowV62831)
  :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  box-shadow: var(--nn-depth-inset) !important;
}
html body #galaxyChatPanel .galaxyChatMessagesV6261 {
  box-shadow: inset 0 3px 7px rgba(0, 5, 12, .30), inset 0 -1px 0 rgba(128, 186, 209, .06);
}
html body #galaxyChatPanel .galaxyChatMessageV6261,
html body .mailWindowV62831 .mailMessageV62831 {
  box-shadow: inset 0 1px 0 rgba(159, 213, 232, .055), 0 1px 2px rgba(0, 5, 12, .20);
}

/* Readable Carrier vitals: the old compact rules inherited a 6px label size.
   Target the text itself; the meter values, colors and geometry stay owned by
   their original components. The fuel help control keeps its own typography. */
html body #carrierInfoPanel .carrierInfoLabel > span,
html body #carrierInfoPanel .carrierFuelReadout .carrierFuelName > span {
  font-size: 10px !important;
  line-height: 1.35 !important;
  letter-spacing: .025em !important;
}
html body #carrierInfoPanel .carrierInfoLabel > b {
  font-size: 11px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
@media (pointer: coarse) {
  html body #carrierInfoPanel .carrierInfoLabel > span,
  html body #carrierInfoPanel .carrierFuelReadout .carrierFuelName > span {
    font-size: 11px !important;
  }
  html body #carrierInfoPanel .carrierInfoLabel > b {
    font-size: 12px !important;
  }
}
/* Compact equipment cards share three aligned tiers on narrow touch screens:
   original icon, whole-word label, then count. No artwork frame is added. */
@media (pointer: coarse) and (max-width: 600px) {
  html body #carrierInfoPanel .carrierEquipmentGridV62790 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  html body #carrierInfoPanel :is(#carrierLaserEquipmentV62779, #carrierShieldEquipmentV62779, #carrierWarpEquipmentV62779) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 28px minmax(29px, auto) 18px;
    text-align: center;
  }
  html body #carrierInfoPanel :is(#carrierLaserEquipmentV62779, #carrierShieldEquipmentV62779, #carrierWarpEquipmentV62779) > :is(img, span, b) {
    justify-self: center;
  }
  html body #carrierInfoPanel :is(#carrierLaserEquipmentV62779, #carrierShieldEquipmentV62779, #carrierWarpEquipmentV62779) > span {
    max-width: 100%;
    font-size: 11px !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }
  html body #carrierInfoPanel :is(#carrierLaserEquipmentV62779, #carrierShieldEquipmentV62779, #carrierWarpEquipmentV62779) > b {
    margin-top: 0 !important;
    line-height: 1.3 !important;
  }
}

/* Larger close and primary repair/upgrade targets in roomy touch layouts.
   Carrier tabs and short Chat/keyboard controls retain their geometry. */
@media (pointer: coarse) and (min-height: 550px) {
  html body :is(
    #carrierInfoPanel #carrierInfoClose, .fuelBaseClose, .garageCloseV6141,
    .rankPanelCloseV6274, .mailCloseV62831, .cargoClose,
    #nnDownloadDialog [data-download-close], #nnTermsDialog [data-terms-close],
    #systemUpgradeDialog [data-system-upgrade-close],
    #commandRepairDialog [data-repair-close],
    #commandHeroUpgradeDialog [data-hero-close],
    #storageUpgradeDialog [data-storage-upgrade-close]) {
    min-width: 44px;
    min-height: 44px !important;
  }
  html body :is(
    #fuelBaseInterior #hospitalFullRepairButton,
    #commandRepairDialog #commandRepairConfirm,
    #commandHeroUpgradeDialog .nnMenuActions > button:not([data-hero-close]),
    #systemUpgradeDialog #systemUpgradeConfirm,
    #storageUpgradeDialog #storageUpgradeConfirm) {
    min-height: 44px !important;
  }
}
